javascript - 如何使用 react-native 在更新 asyncstorage 时更新 app.js

Question

应用程序.js

const App = () => {
 const [auth, setAuth] = useState(false);
 useEffect(() => {
  readData();
 }, []);

 const readData = async () => {
  try {
    const userAge = await AsyncStorage.getItem('token')
     if (userAge !== null) {
       setAuth(true)
    }
   } catch (e) {
    alert('Failed to fetch the data from storage')
   }
   }
  return (
  <>
  {
    auth ? (
      <Index />
    ) : (
      <NavigationContainer>
        <Tab.Navigator initialRouteName="Login">
          <Tab.Screen name="Login" component={Login} />
        </Tab.Navigator>
      </NavigationContainer>
    )
   }

  </>
 )
}

export default App;

登录.js

const Login = ({navigation}) => {

const submitHandler = async(values) => {
    console.log(values);
    AsyncStorage.setItem('token', 'dd');
};
return (
    <View style={styles.container}>
        <Text style={styles.heading}>Sign in to get Started</Text>

        <Formik
            validationSchema={loginValidationSchema}
            initialValues={{ email: '', password: '' }}
            onSubmit={values => submitHandler(values)}
        >
            {({
                handleChange,
                handleBlur,
                handleSubmit,
                values,
                errors,
                isValid,
            }) => (
                <>
                    <Text style={styles.head}>Email:</Text>
                    <TextInput
                        name="email"
                        placeholder="Email"
                        style={styles.input}
                        onChangeText={handleChange('email')}
                        onBlur={handleBlur('name')}
                        value={values.email}
                    />
                    {errors.email &&
                        <Text style={{ fontSize: 10, color: 'red' }}>{errors.email}</Text>
                    }

                    <Text style={styles.head}>Password:</Text>
                    <TextInput
                        name="password"
                        placeholder="password"
                        style={styles.input}
                        onChangeText={handleChange('password')}
                        onBlur={handleBlur('password')}
                        value={values.password}
                    />
                    {errors.password &&
                        <Text style={{ fontSize: 10, color: 'red' }}>{errors.password}</Text>
                    }

                    <Button
                        onPress={handleSubmit}
                        title="Login"
                        style={styles.button}
                        disabled={!isValid}
                    />

                    <Text style={styles.signup}>Forget Password?</Text>
                    <Text style={styles.register}>Register as a Vendor/Driver Here</Text>
                    <Text style={styles.signup}>Signup Here</Text>

                </>
            )}
        </Formik>
    </View>
   )
  }

我正在尝试制作受保护的屏幕，如果用户未登录，他将无法访问该屏幕更新 index.js。我是本地人的新手，这是我的第一个项目并被困在这里。任何形式的帮助都将不胜感激

标签： javascriptreactjsreact-nativereact-hooksreact-native-android