使用参数从 React Navigation 导航器内部调用组件函数

Question

使用 React Nav v4，我尝试在 ComponentA.js 中设置参数 ...

componentDidMount(){
    ...

    this.props.navigation.setParams({ 
        goToTop: this.goToTop.bind(this) 
    });

}

并从我的 initNavigator.js 中的 createBottomTabNavigator > tabBarOnPress 中调用它们

const MainTabs = createBottomTabNavigator({
HomeStack: {
    screen: HomeCard,
    navigationOptions: (navigation, navigationOptions) => ({

        ...,
        tabBarOnPress: ({navigation, defaultHandler}) => {
            const { isFocused, state, goBack, routes } = navigation;

            // NEED TO CALL HERE

        },

我试过 navigation.getParam('goToTop', 'someDefult')

Logs someDefult

console.log(navigation.state)

{ 
isTransitioning: false,
index: 0,
key: 'HomeStack',
routeName: 'HomeStack',
params: undefined,
routes: 
[ { routeName: 'Home',
    key: 'id-1567452719174-1',
    params: { goToTop: [Function: bound ] } } ] }

还有为什么 params 未定义但路由 params 包含该函数的原因吗？

提前致谢。

Answer 1

通过调用state.routes[0].params.goToTop()解决；

const MainTabs = createBottomTabNavigator({
HomeStack: {
    ...
    ...
    navigationOptions: (navigation, navigationOptions) => ({

        ...,
        tabBarOnPress: ({navigation, defaultHandler}) => {
            const { isFocused, state, goBack, routes } = navigation;

            // NEED TO CALL HERE
            state.routes[0].params.goToTop();

        },