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

Question

我可以将函数作为渲染函数中的参数传递到下一个屏幕，如下面的代码所示

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

Answer 1

这是因为第二个代码中 onNavigateBack: this.handleOnNavigateBack.bind(this) 的 'this' 没有像您在第一个代码中那样指向您的组件。(因为 navigationOptions是静态的)

要存档您想要的内容，您应该首先将您的函数从您的组件传递给导航的参数。然后，您可以使用参数在 NavigationOption 中调用它。