React native 如果用户具有授权，切换到其他屏幕时发出警告

当我打开应用程序时，如果

isAuth

变量为true，则表示用户拥有授权，然后我想转到提供者屏幕

我的授权组件

export const LoginScreen: NavigationStackScreenComponent<NavigationParams> = observer(({ navigation }: NavigationParams) => {
    useEffect(() => {
        AuthState.checkAuthentication();
    }, []);

    if (AuthState.isAuth) {
        navigation.navigate('Provider');
    }

    return <View style={styles.body}>{LoaderState.loading ? <LoaderComponent /> : <AuthComponent />}</View>;
});

export const ProvidersScreen: NavigationStackScreenComponent<NavigationParams> = observer(({ navigation }: NavigationParams) => {
    useEffect(() => {
        ProvidersState.setProviders();
    }, []);

    return (
        <View style={styles.body}>
            {LoaderState.loading ? (
                <LoaderComponent />
            ) : (
                <ItemListComponent itemsList={ProvidersState.providersList} />
            )}
        </View>
    );
});

export const LoginScreen:NavigationStackScreenComponent=observer（{navigation}:NavigationParams）=>{
useffect（（）=>{
AuthState.checkAuthentication（）；
}, []);
if（AuthState.isAuth）{
导航。导航（“提供者”）；
}
返回{LoaderState.loading？：

如何使用条件语句切换到另一个屏幕？
功能组件基本上等同于类组件中的
render（）
函数。在组件得到render之前调用
navigate
，这是一个问题

您可以在
useffect
中调用
导航
，也可以将条件逻辑放入父视图中

在第一种情况下，组件渲染后将调用
导航

useEffect(() => {
    AuthState.checkAuthentication();
    if (AuthState.isAuth) {
        navigation.navigate('Provider');
    }
}, []);

因此，它将在半秒钟内可见，然后更改。如果您想避免这种情况，请选择第二个选项

你可以把条件放在父项中，比如

<View>{AuthState.isAuth ? <ProvidersScreen /> : <LoginScreen />}</View>

{AuthState.isAuth？：}