如何将调度函数传递到 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 设置中的 headerRight 一样将调度函数传递给 HeaderComponent。我该怎么做？

Answer 1

您需要在 headerRight 中 call 您的 dispatch 函数，并在您的 component 为 mounted 时使用 this.props.navigation.setParams[=19 进行设置=]

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
}

希望对您有所帮助！

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

How can I pass dispatch function into Header Component?

react-native

react-redux

react-navigation