如何将调度函数传递给 Header 组件？

Question

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: {
      title: 'Foo',
      headerRight: (<MyIcon dispatch={}/>), //<- Here
    }
  },
  Detail: {
    screen: Detail,
    navigationOptions: {},
  },
})

我想在 React Navigation Option 设置中将 dispatch 函数传递给 HeaderComponent ，如 headerRight 。我怎样才能做到这一点？

Answer 1

您需要在使用时输入并设置call您的dispatch功能headerRightcomponentmountedthis.props.navigation.setParams

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 }) => {
            title: 'Foo',
            headerRight: (<MyIcon 
                          onPress={ () => navigation.state.params.dispatch() } />)
                          // calling dispatch when headerRight icon is press
        }
    },
    Detail: {
        screen: Detail,
        navigationOptions: {},
    },
})

dispatch在组件中设置函数

...

//setting dispatch function to headerRight in your component
componentDidMount() {
    this.props.navigation.setParams({
        dispatch: this.dispatch.bind(this)
    });
}

dispatch() {
    // your code
}

我希望这有帮助！