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注意点