React Navigation根据上下文状态重定向用户

Question

我添加了一个名为roleSelected的状态，该roleSelected的初始值为false，它显示在我的AuthContext中

const [roleSelected, setRoleSelected] = useState(false);

我的堆栈导航屏幕是这样的，

<Stack.Screen name={routes.LOGIN} component={Login} />
<Stack.Screen name={routes.SIGNUP} component={Signup} />
<Stack.Screen name={routes.ROLE_SELECTION} component={Role} />

我要做的：因此，如果roleSelection是false，那么无论我当前在该堆栈中的哪个屏幕上，我都希望重定向用户ROLE_SELECTION路由。因此，对于这种情况，我在Login和Signup屏幕中添加了以下代码，

const Login = ({navigation}) => {
...
const {roleSelected} = useContext(AuthContext);
useEffect(() => {
!roleSelected && navigation.navigate(routes.ROLE_SELECTION);
console.log(roleSelected);
}, [navigation]);

每当应用程序启动时，用户重定向到ROLE_SELECTION路由，但用户仍然可以点击返回并转到Login屏幕，我不希望发生这种情况。如果有人能帮忙，我真的很感激，谢谢。

Answer 1

您是否尝试使用navigation.reset而不是navigation.navigate来擦除导航器状态并将其替换为新路由。

Answer 2

尝试在代码中再添加一个带有空依赖数组的useEffect((。

useEffect(() => {
!roleSelected && navigation.navigate(routes.ROLE_SELECTION);
console.log(roleSelected);
}, []);

Answer 3

我试着有条件地呈现堆栈屏幕，比如

{!auth && <Stack.Screen name={routes.LOGIN} component={Login} />}
{!auth && <Stack.Screen name={routes.SIGNUP} component={Signup} />}
{auth && <Stack.Screen name={routes.ROLE_SELECTION} component={Role} />}