我可以将函数作为渲染函数中的参数传递到下一个屏幕,如下面的代码所示
render(){
return (
<View style={styles.container}>
<View style={styles.titlewrapper}>
<Text style={styles.titleinfo}><Icon name="add-circle" style={{color:"#039BE5"}}/> Customize your own feed </Text>
</View>
<TouchableOpacity onPress={()=> requestAnimationFrame(()=>{ this.props.navigation.navigate('topic', {onNavigateBack: this.handleOnNavigateBack.bind(this)
}) }) }
>
<View style={styles.buttoncontainer}>
<Text style={styles.buttontext}>Get started</Text>
</View>
</TouchableOpacity>
</View>
);
}
如您所见,我可以将函数“handleOnNavigateBack”作为 onNavigateBack 参数传递给主题屏幕及其工作,但我无法在 NavigationOptions 中实现这一点,如下所示
static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return{
headerStyle:{
elevation:0
},
headerTitle: (
<Image style={{ height: responsiveHeight(6), width: responsiveWidth(30), alignSelf:'center' }} source={require('../images/logo-header2.png')}/>
),
headerLeft: <TouchableOpacity onPress={ () => navigation.navigate('DrawerOpen') } ><Icon name="menu" style={{paddingLeft:15 }} size={35}/></TouchableOpacity>,
headerRight: <TouchableOpacity onPress={ () => navigation.navigate('topic', {
onNavigateBack: this.handleOnNavigateBack.bind(this) }) }><Icon name="create" style={{paddingRight:15 }} size={35}/></TouchableOpacity>,
}
};
我已经尝试了所有方法,但似乎不起作用,我们将不胜感激!
软件 |版本
react 导航 | 1.0.0-beta.19
native react | 0.49.5
最佳答案
这是因为第二个代码中 onNavigateBack: this.handleOnNavigateBack.bind(this)
的 'this' 没有像您在第一个代码中那样指向您的组件。(因为 navigationOptions
是静态的)
要存档您想要的内容,您应该首先将您的函数从您的组件传递给导航的参数。然后,您可以使用参数在 NavigationOption 中调用它。
关于javascript - react-native 和 react-navigation 无法将函数作为参数传递到 NavigationOptions 中的下一个屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48222872/