在 React Navigation v5 动态组件配置中将 props 传递给组件

Question

在我的应用程序中，如果用户未登录，我将显示登录屏幕；如果用户已登录，我将显示登录屏幕。在下面的简单示例中，您可以看到我正在检查 和 是否存在于jwt我user的应用程序中redux 存储，然后显示相应的屏幕。

type Props = {
    +jwt: string | null;
    +user: UserModel | null;
};

export class AuthStackNavigator extends Component<Props> {

    renderScreen() {

        if (this.props.jwt && this.props.user) {
            return (
                <Stack.Screen name={'AuthenticatedView'} component={AuthenticatedView} />
            );
        } else {
            return (
                <Stack.Screen name={'LoginView'} component={LoginView} />
            );
        }
    }

    render() {
        return (
            <Stack.Navigator>
                {this.renderScreen()}
            </Stack.Navigator>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        jwt: getJwt(state),
        user: getUser(state)
    };
};

export default connect(mapStateToProps)(AuthStackNavigator);

您可以看到，如果和存在，AuthenticatedView则组件已渲染。在内部，我目前再次从 redux 存储中获取 ，它可能为空 - 这涉及另一项检查。有没有一种方法可以将其作为道具传递给组件，因为我知道它存在于此处？这样我就不必多次进行相同的检查。jwtuserAuthenticatedViewuseruser<Stack.Screen>

我知道您可以在使用以下导航时将数据发送到组件：navigation.navigate('View', props)，但我不使用此功能导航到此屏幕。

Answer 1

阅读官方文档https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props