如果获得用户授权，切换到另一个屏幕时的警告

Question

[当我打开应用程序并且如果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>
    );
});

但是我得到警告。我知道它与react-navigation库相关联。

如何使用条件语句切换到另一个屏幕？

Answer 1

功能组件基本上与类组件中的render()功能等效。您正在组件渲染之前调用navigate，这是一个问题。

您可以在navigate中调用useEffect或将条件逻辑放在父视图中。

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

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

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

您可以将条件放在父项中。有点像

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