Reactjs 针对导航问题对本机Redux作出反应

我最近开始用React Native编程，刚刚进入导航领域，它们非常酷和强大。然而，作为初学者，我遇到了一些问题。我使用Redux来管理状态，并且我有一个导航堆栈，它应该只在登录状态处于活动状态时才呈现。这是代码的一小部分

const RootStackScreen = () => (
  <RootStack.Navigator headerMode="none">
    {initialState.loggedIn ? (
      <RootStack.Screen name="Application" component={TabScreen} />
    ) : (
      <RootStack.Screen name="Authentication" component={AuthStackScreen} />
    )}
  </RootStack.Navigator>
);

我试着说

initialState.loggedIn

以及

loggedIn

，但由于某种原因，它在另一个页面中通过redux更新时不会更新值。我已经通过简单地打印新值来检查以确保值正在更新，因此我知道更新值不是问题，而只是根堆栈感测到更新

多谢各位！任何帮助都将是有用的，因为我已经为此拔出了我的头发

更新：我正在通过调用Dispatch从登录页面设置状态

function mapDispatchToProps(dispatch) {
  return {
    logInSuccess: () =>
      dispatch({
        type: "USER_LOGIN_GOOD",
      }),
    logInFailed: () =>
      dispatch({
        type: "USER_LOGIN_FAIL",
      }),
  };
}

此外，我刚刚尝试将initialState传递到根堆栈中，如下所示

const RootStackScreen = (initialState) => ( CONTENT HERE )

但它仍然不起作用。再次感谢你

@Nathan Belete

在根堆栈中，不应该有if-else语句。您的第一个初始路由应该是身份验证。我想你可以把它更新成这样

const RootStackScreen = () => (
  <RootStack.Navigator headerMode="none" initialRouteName="Authentication">
      <RootStack.Screen name="Application" component={TabScreen} />
      <RootStack.Screen name="Authentication" component={AuthStackScreen} />
    )}
  </RootStack.Navigator>
);

constrootstackscreen=（）=>(
)}
);

然后在文件AuthStackScreen.js中，您应该处理逻辑以检查用户是否已经登录。以下是示例代码：

import {useDispatch, useSelector, useStore} from 'react-redux'

export const SignInScreen = ({navigation}: SignInProps): ReactElement => {
  const dispatch = useDispatch()
  const appState = useStore().getState()
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    if (appState.loggedIn) {
      navigation.replace('Application')
    }

    setLoading(false)
  }, [])

  if (loading) return <LoadingScreen />

  return <YOUR_COMPONENT>

}

从'react redux'导入{useDispatch，useSelector，useStore}
export const signnscreen=（{navigation}:SignInProps）：ReactElement=>{
const dispatch=usedpatch（）
const appState=useStore（）.getState（）
常量[loading，setLoading]=useState（true）
useffect（（）=>{
if（appState.loggedIn）{
导航.replace（'应用程序'）
}
设置加载（错误）
}, [])
如果（正在加载）返回
返回
}

---

我希望这有助于根据react navigation docs，对于这种情况，您不应该在组件中放置堆栈导航器等的位置执行任何条件

更好的方法是先做一个闪屏，这通常在每个应用程序中都有

将其设为初始路径，然后对要显示的页面进行逻辑计算，如：

<Stack.Navigator
          initialRouteName="SplashScreen"
          >
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="SplashScreen" component={SplashScreen} />
          <Stack.Screen name="Home" component={Home} />
        </Stack.Navigator>

---

希望能有帮助。无需怀疑

RootStackScreen

应该从道具获取登录值。你能在为

const RootStackScreen设置
初始状态的地方发布更多的代码吗？发布已经更新！感谢您的更新，但我真正想了解的是状态如何绑定到
RootStackScreen
。在redux中，您应该将存储中的所有值设置为一个存储，然后通过将组件连接到存储（通过hooksor HoC）从组件中访问它们。您是否正在尝试直接在根屏幕中访问
初始状态
。因为用户没有登录，所以需要用户启动然后登录。然而，现在的问题是，当我从我的登录屏幕更新isLoggedIn时，它不会进入主屏幕。因此，我发现我只需要手动放置
this.props.navigation.navigate（“应用程序”）。这是个好习惯吗？很好，你成功了。如果你认为我的回答有用的话。你可以投票。谢谢
<Stack.Navigator
          initialRouteName="SplashScreen"
          >
          <Stack.Screen name="Login" component={LoginScreen} />
          <Stack.Screen name="SplashScreen" component={SplashScreen} />
          <Stack.Screen name="Home" component={Home} />
        </Stack.Navigator>

class SplashScreen extends .. {

...
componentDidMount(){
isLoggedIn?this.props.navigation.navigate('Home'):this.props.navigation.navigate('Login')
}

}