Question

所以我有这个StackNavigator，它由几个屏幕和一个带有几个屏幕的TabNavigator组成。我正在尝试从TabNavigator内的一个屏幕（登录）导航到另一个屏幕（HomeScreen）并传递参数。

基本上，堆栈看起来像这样：

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

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

router.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
        }
    });
}

SignIn.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（）中接收它。

那样它将起作用！

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

1 个答案: