[英]react-native and react-navigation Unable to pass a function as a param to the next screen in NavigationOptions
i am able to to pass a function to the next screen as a param in the render function as you can see the codes below 我能够将函数作为渲染函数中的参数传递给下一个屏幕,如下面的代码所示
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>
);
}
as you can see i can pass the function "handleOnNavigateBack" as onNavigateBack param to topic screen and its working but i can't achieve this in NavigationOptions as you can see it below 如您所见,我可以将函数“ 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>,
}
};
i have tried every thing but it seems not to work, any help will be appreciated ! 我已经尝试了所有事情,但似乎没有用,任何帮助将不胜感激!
software | 软件| version
版
react-navigation | 反应导航| 1.0.0-beta.19
1.0.0-beta.19
react-native | 反应本机| 0.49.5
0.49.5
It's because that 'this' of onNavigateBack: this.handleOnNavigateBack.bind(this)
in second code is not pointing your component like you did at first code.(since navigationOptions
is a static) 这是因为
onNavigateBack: this.handleOnNavigateBack.bind(this)
“ this” onNavigateBack: this.handleOnNavigateBack.bind(this)
第二个代码中的onNavigateBack: this.handleOnNavigateBack.bind(this)
没有像第一个代码中那样指向您的组件。(因为navigationOptions
是静态的)
To archive what you want, you should pass your function to navigation's param from your component first. 要存档您想要的内容,您应该首先将功能从组件传递到导航的参数。 Then, you call it in NavigationOption by using params.
然后,使用参数在NavigationOption中调用它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.