React Native中无法在NavigationOptions传递函数参数至下一页

你遇到的核心问题是：navigationOptions是组件的静态方法，这里的this指向的是组件类本身，而非组件的实例，所以你没法直接在静态方法里访问到实例的handleOnNavigateBack方法，自然也就没法绑定上下文和传递。

针对这个问题，我们可以通过navigation.setParams把实例方法注入到导航参数中，再在navigationOptions里读取这个参数来实现需求，具体步骤如下：

步骤1：在组件挂载时注入实例方法到导航参数 #

在你的组件中添加componentDidMount生命周期钩子，把handleOnNavigateBack方法绑定实例后，通过navigation.setParams存入导航参数：

componentDidMount() {
  // 将实例方法绑定后存入导航参数
  this.props.navigation.setParams({
    onNavigateBack: this.handleOnNavigateBack.bind(this)
  });
}

步骤2：在navigationOptions中读取参数并传递 #

修改navigationOptions里的headerRight部分，从navigation.state.params中取出我们注入的方法，再传递给目标页面：

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={ () => {
          // 从导航参数中取出实例方法
          const { onNavigateBack } = params;
          // 传递给topic页面
          navigation.navigate('topic', { onNavigateBack });
        } }
      >
        <Icon name="create" style={{paddingRight:15 }} size={35}/>
      </TouchableOpacity>
    ),
  };
};

补充说明 #

这种方式在你使用的react-navigation 1.0.0-beta.19版本中完全适用，核心思路是利用导航参数作为静态方法和实例之间的桥梁——导航参数和当前组件的导航实例绑定，能够正确关联到组件实例的方法。

如果你的handleOnNavigateBack方法不需要依赖组件实例的state或props，也可以把它定义为静态方法，但这种场景比较少，上面的方案是更通用的解决方式。

内容的提问来源于stack exchange，提问作者frontendkiller