В моем приложении я отображаю экран входа в систему, если пользователь не вошел в систему, и экран входа в систему, если пользователь вошел в систему. В приведенном ниже простом примере вы можете видеть, что я проверяю, есть ли jwt и user существует в моем магазине приставок и затем отображается соответствующий экран.
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 отображается, если существуют jwt и user. Внутри AuthenticatedView я в настоящее время снова получаю user из магазина приставок, где он, возможно, равен нулю - это включает еще одну проверку. Есть ли способ, которым я могу передать user компоненту как опору из <Stack.Screen>, поскольку я знаю, что он существует здесь? Таким образом, мне не нужно делать одну и ту же проверку несколько раз.
Мне известно, что вы можете отправлять данные компонентам при навигации с помощью: navigation.navigate('View', props), но я не перехожу на этот экран с помощью этой функции.