简体   繁体   English

react-native和react-navigation无法将参数作为参数传递给NavigationOptions中的下一个屏幕

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM