如何在React Navigation的headerRight组件中传入dispatch函数？

嘿，我来帮你搞定这个问题！你当前使用StackNavigator时，想给headerRight的MyIcon组件传入dispatch函数，其实只需要调整navigationOptions的写法就行，具体看下面的方案：

解决方案：将navigationOptions改为函数形式 #

原来的navigationOptions是静态对象，我们可以把它改成一个函数，这个函数会接收一个包含navigation对象的参数，而navigation里就自带我们需要的dispatch方法。

修改后的完整代码如下：

import React from 'react'
import { StackNavigator } from 'react-navigation'
import Home from './Home'
import Detail from './Detail'
import MyIcon from './MyIcon'

export default StackNavigator({
  Home: {
    screen: Home,
    // 把navigationOptions改为函数，解构获取navigation对象
    navigationOptions: ({ navigation }) => ({
      title: 'Foo',
      headerRight: (<MyIcon dispatch={navigation.dispatch} />),
    })
  },
  Detail: {
    screen: Detail,
    navigationOptions: {},
  },
})

原理说明 #

当navigationOptions以函数形式定义时，它会自动接收一个配置对象，其中的navigation属性包含了当前页面的导航相关方法和状态，dispatch就是其中之一，用来触发React Navigation的导航action（比如跳转、返回等）。

这样修改后，你的MyIcon组件就能通过props.dispatch拿到这个方法，直接用来触发对应的导航操作或者Redux action（如果你的项目集成了Redux的话）。

另外，如果你的项目已经和Redux集成，也可以通过connect方法把Redux的dispatch映射到MyIcon的props中，但上面的方法是最直接的，不需要额外的Redux连接就能获取到React Navigation自身的dispatch。

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