React Native使用react-navigation时,设置navigationOptions中Static中使用this注意点

Posted 玉思盈蝶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native使用react-navigation时,设置navigationOptions中Static中使用this注意点相关的知识,希望对你有一定的参考价值。

使用react-navigation时,单页面设置navigationOptions中,进行Static中调用方法,不能像以下设置

onPress = {()=>this.clickFinishButton()}
export default class extends Component {
  static navigationOptions = ({
    navigation,
    screenProps
  }) => ({
    headerTitle: List实现多选,
    headerTitleStyle: {
      color: white
    },
    headerStyle: {
      backgroundColor: Color.kMainColor // 设置导航栏的背景颜色,headerTintColor设置无效
    },
    headerRight:(
        <NavigationItem
            title=完成
            // 这里注意: static里面不能使用this调用方法,出现clickFinishButton is not function
            // 参考博客: http://www.jianshu.com/p/2f575cc35780
            // onPress={()=>navigation.state.params.navigatePress()}
            onPress = {()=>this.clickFinishButton()}
        />
    )
  });

解决方法:

export default class extends Component {
  static navigationOptions = ({
    navigation,
    screenProps
  }) => ({
    headerTitle: List实现多选,
    headerTitleStyle: {
      color: white
    },
    headerStyle: {
      backgroundColor: Color.kMainColor // 设置导航栏的背景颜色,headerTintColor设置无效
    },
    headerRight:(
        <NavigationItem
            title=完成
            // 这里注意: static里面不能使用this调用方法,出现clickFinishButton is not function
            // 参考博客: http://www.jianshu.com/p/2f575cc35780
            onPress={()=>navigation.state.params.navigatePress()}
            // onPress = {()=>this.clickFinishButton()}
        />
    )
  });
componentDidMount(){
    // 处理数据源
    this.handlerDataSource();
    this.props.navigation.setParams({navigatePress:this.clickFinishButton})
  }
  // 点击完成按钮
  clickFinishButton = ()=> {
      alert(哈哈);
    //   let data = this.state.dataArr;
    //   let selectResultArr = [];
    //   for (var index in data) {
    //         var element = object[index];
    //         if (element.isSelected) {
    //             selectResultArr.push(element);
    //         }
    //   }
    //   alert(selectResultArr.length);
  }

 

以上是关于React Native使用react-navigation时,设置navigationOptions中Static中使用this注意点的主要内容,如果未能解决你的问题,请参考以下文章

React-Native中导航组件react-navigation的使用

React Native导航器之react-navigation使用

无法从“App.js”解析“@react-navigation/native”-React Native + 如何解决?

React Native - 使用 react-navigation 和 react-redux 在屏幕之间切换时数据丢失

react-native填坑--react-navigation

React Native使用react-navigation时,设置navigationOptions中Static中使用this注意点