reactjs - Android 上的 React Navigation 身份验证流程

Question

在开发过程中，身份验证流程运行良好，没有任何问题。但是，在我构建了一个 apk 并将其安装在 3 部不同的手机上之后，身份验证流程不起作用。

在登录屏幕上，我收到一条消息，提示登录成功，但重新加载了登录屏幕。我似乎无法弄清楚出了什么问题。

这是我的导航逻辑：

import { LoginStack, AllTabs } from './components/TabNavigation';
import { useSelector } from 'react-redux';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();


const AppHolder = () => {
    const token = useSelector((state) => state.auth.token);
    return (
        <>
        <Stack.Navigator headerMode="none">
            {token === null ? (
                <Stack.Screen name="Login" component={LoginStack} />
            ): 
            (
                <Stack.Screen 
                name="Private"
                component={AllTabs}
                options={{ headerShown: false }}
                />
            )
            }
        </Stack.Navigator>
        </>
    )
}

这是登录屏幕（注意：我正在对我的 API 请求使用 react-query）：

const Login = () => {
    const dispatch = useDispatch();
    const mutation = useMutation(signIn);
    const onSubmitForm = async(values) => {
        await mutation.mutate(values);
    }

    useEffect(() => {
        if(mutation.data){
            const checker = async() => {
                const str = mutation.data.token;
                const si = await deviceStorage.saveItem("token", str);
            }
            checker();
            dispatch({ type: Auth.SIGNED_IN, payload: mutation.data });
        }
    }, [mutation.data]);


    return (
        <NativeBaseProvider>
        <View style={{ backgroundColor: '#e1e2dd' }}>
            <View style={styles.holder}>
                <Text style={styles.logger}> Login </Text>
            </View>
            <LoginForm onSubmitForm={onSubmitForm} errorMSG={mutation.error} loader={mutation.isLoading} isSuccess={mutation.isSuccess} />
        </View>
        </NativeBaseProvider>
    )
}

这是登录表单

const LoginForm = ({ onSubmitForm, errorMSG, loader, isSuccess }) => {
    const LoginSchema = Yup.object().shape({
        email: Yup.string().email("Please enter your valid email").required("Enter Your Email Address"),
        password: Yup.string()
            .min(2, "Password is too short!")
            .required("Enter your password")
    });
    const { handleChange, handleSubmit, handleBlur, errors, touched, values  } = useFormik({ validationSchema: LoginSchema, initialValues: { email: '', password: '' }, 
    onSubmit: values => onSubmitForm(values)  });
    return (
        <SafeAreaView style={styles.formHolder}>
            {errorMSG && (<Center><Box _text={{ fontSize: "sm", fontWeight: "bold", color: "#960c31" }}>{errorMSG.message}</Box></Center>)}
            {loader && (
                <Alert status="info" variant="solid">
                    <Alert.Icon />
                    <Alert.Title flexShrink={1}>Checking your credentials...</Alert.Title>
                </Alert>
            )}
            {isSuccess && (<Alert variant="left-accent" status="success">
                <Alert.Icon />
                <Alert.Title flexShrink={1}>Successfully signed in</Alert.Title>
                </Alert>
            )}
                <View>
                    <TextInput
                    value={values.email}
                    onChangeText={handleChange('email')}
                    onBlur={handleBlur('email')}
                    error={errors.email}
                    touched={touched.email}
                    style={styles.input}
                    placeholder="Email or phone number"
                    />
                    {errors.email && touched.email ? <Center><Box>{errors.email}</Box></Center> : null}

                    <TextInput
                    value={values.password}
                    onChangeText={handleChange('password')}
                    onBlur={handleBlur('password')}
                    value={values.password}
                    error={errors.password}
                    touched={touched.password}
                    style={styles.input}
                    secureTextEntry={true}
                    placeholder="****"
                    />
                    {errors.password && touched.password ? <Center><Box>{errors.password}</Box></Center> : null}
                    <View style={styles.holder}>
                    <Button onPress={handleSubmit}>LOGIN</Button>
                    </View>
                </View>
        </SafeAreaView>
    )
}

这在开发中没有任何问题。即使我将 expo Metro 服务器更改为“生产模式”，它也可以工作。但是在构建apk文件后没有工作。

标签： reactjsreact-nativeexporeact-native-androidreact-navigation