0

在我App.tsx的设置中，我是这样设置的：

export default function App() {
  const [user, setUser] = useState<any>(null);
  return (
    <Provider store={store}>
        <NavigationContainer>
            <AuthContext.Provider value={{user, setUser}}>
              <SafeAreaView style={{flex: 1}}>
                <Navigation />
              </SafeAreaView>
            </AuthContext.Provider>
        </NavigationContainer>
    </Provider>
  );
}

我的导航组件包含根据用户呈现经过身份验证或未经身份验证的路由的逻辑，它包含以下内容：

const Navigation = () => {
  const { user } = useContext(AuthContext);
  return (
      <Stack.Navigator>
        {user ? (
          <Stack.Group>
            <Stack.Screen
              name="Main"
              component={Auth}
              options={{
                headerShown: false,
              }}
            />
            <Stack.Screen 
              name="Users"
              component={Users}
              options={{headerShown:false}}
            />
          </Stack.Group>
        ) : (
          <Stack.Screen
            name="NonAuth"
            component={NonAuth}
            options={{ headerShown: false }}
          />
        )}
      </Stack.Navigator>
  );
};

export default Navigation;

该Auth组件有一段BottomTabNavigator时间NonAuth是另一个StackNavigator 在 BottomTabNavigator 的屏幕内我有一个设置屏幕，其中有注销按钮，当我单击此按钮时，我将用户设置为 null，但我收到错误消息：null is不是评估 user.role 的对象在 BottomTabNavigator 我正在检查 user.role 以确定要显示的底部选项卡，但是由于用户为 null 为什么它进入 Auth 路由，当我正确登录时，它会自动从 NonAuth 到 Auth因为在登录时我将用户设置为一些数据，但在注销时我将其设置为 null 并且它仍然在 Auth 内部？

这些是我正在使用的版本：

    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.0.11",

另请注意，NonAuth 是使用@react-navigation/native-stack Navigation创建的@react-navigation/stack

4

2 回答 2

0

听起来像一个比赛条件。user最终将为空，但您的注销屏幕会首先获取该值。这很正常。对该屏幕进行编程以尊重空用户的可能性。

于 2022-02-02T21:42:24.450 回答
0

它不起作用的原因是因为我有条件地将堆栈渲染到另一个堆栈中，所以我不得不将其更改为

const Navigation = () => {
  const { user } = useContext(AuthContext);
  return user ? (
      <Stack.Navigator>
          <Stack.Group>
            <Stack.Screen
              name="Main"
              component={Auth}
              options={{
                headerShown: false,
              }}
            />
            <Stack.Screen 
              name="Users"
              component={Users}
              options={{headerShown:false}}
            />
          </Stack.Group>
      </Stack.Navigator>) : 
      <NonAuth/> }

     
  );
};

export default Navigation;
于 2022-02-03T16:14:16.067 回答