使用 Redux 工具包反应原生导航

Question

专家，

我在我的 React Native 中使用 Redux Toolkit v @reduxjs/toolkit": "^1.4.0" v "react-native": "0.63.1" 和 "@react-navigation/native": "^5.1 .5" 作为导航库

我有一个堆栈导航器，可以说下面两个屏幕

1. 登录
2. 忘记密码。

登录是默认屏幕，其中包含忘记密码屏幕的链接。

这似乎工作正常。

在我的忘记密码屏幕中，假设我正在执行 API 调用，并且根据 API 的响应，我需要显示 toast 消息并留在忘记密码页面或显示/不显示 toast消息，但导航回登录页面。

我的登录和忘记密码屏幕都是功能组件。

为简单起见，这里是我的忘记密码屏幕的摘录。当调度被触发时，API 被调用（redux-thunk）并且 API 的响应存储在我的 Slice 中。我正在尝试了解如何在忘记密码屏幕上显示/不显示烤面包机，然后从该屏幕导航/不导航。

由于导航基于 Stack Navigator，所以现在，由于我的根导航逻辑，无论响应如何，它都会导航到登录屏幕

 <NavigationContainer>
      {loggedIn ? <MainTabNavigator /> : <AuthNavigator />}
    </NavigationContainer>

忘记密码屏幕：

<Formik
  initialValues={{ email: "" }}
  onSubmit={(values) => {
    dispatch(forgotPassword(values.email));
  }}
>
  {(props) => (
    <View>
      <View style={styles.section_Email}>
        <Input label="Email" value={props.values.email} />
      </View>
      <View style={{ flexDirection: "row" }}>
        <Button caption="Send Email" onPress={props.handleSubmit} />
      </View>
    </View>
  )}
</Formik>

Answer 1

您可以制作一个ToastContainer 组件，然后

<ToastContainer>
  <NavigationContainer>
    { loggedIn ? <MainTabNavigator /> : <AuthNavigator /> }
  </NavigationContainer>
</ToastContainer>

从redux-store（通过useSelector）拉出这个loggedIn，并从forgotPasssword reducer 触发toast，并相应地更新loggedIn。