参数未传递到 TabNavigator 中的子屏幕

Question

所以我有这个由几个屏幕组成的 StackNavigator 和一个包含多个屏幕的 TabNavigator。我正在尝试从一个屏幕 (SignIn) 导航到位于 TabNavigator 内的另一个屏幕 (HomeScreen) 并传递一个参数。

堆栈基本上是这样的：

StackNavigator(router.js):
    - StackNavigator:
        - SignIn
        - SignOut
    - TabNavigator:
        - Home
        - Search
        - Profile
    - AnotherScreen

我想从 SignIn 导航到 Home 并传递一个参数。另外我想将另一个不同的参数从 AnotherScreen 传递给 Home，以便屏幕 Home 将重新呈现。

路由器.js

export const SignedOut = createStackNavigator({
    SignInPage: {
        screen: SignIn
    }
});

export const SignedIn = createBottomNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor }) =>
                <FontAwesome name='home' size={ 30 } color={ tintColor } />
        }
    }
}, {
    tabBarOptions: {
        ...
    }
});

export const createRootNavigator = (signedIn = false) => {
    return createStackNavigator({
        SignedIn: {
            screen: SignedIn
        }
    });
}

登录.js

...
    <Button onPress={ () => navigation.navigate('SignedIn', {param: '1'})} />
...

HomeScreen.js

...
    const navigation = this.props.navigation;
    const param = navigation.state.params.param;
...

现在，当我按下 SignIn.js 中的按钮时，它会重定向到页面 SignedIn，该页面具有初始路由 Home，但我在导航中传递的参数没有传递到我的 HomeScreen，它总是不返回任何值。

如何将登录页面中的参数传递到主屏幕？

Answer 1

你必须在 ComponentDidMount() 中接收它。

这样就可以了！