Question

我似乎无法在App.js文件上使用三元身份验证。我正在检查是否有密钥，然后根据该密钥的存在显示AuthStack或MainStack。当我从AuthStack转到MainStack（将密钥设置为AsyncStorage）时，出现错误-任何导航器都未处理带有有效载荷{'name'：'Home'}的'NAVIGATE'操作。注销或删除密钥时也会发生同样的情况。

根据文档，似乎用户在通过身份验证后会立即进入应用程序，但这似乎不起作用。

App.js文件

import React, { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-community/async-storage';

import { NavigationContainer } from '@react-navigation/native';
import AuthStack from './src/navigation/AuthStack'
import MainStack from './src/navigation/MainStack'

export default function App({ navigation }) {
  const [userKey, setUserKey] = useState(null)

  useEffect(() => {
    const bootstrapAsync = async () => {

      try {
        let userKey = await AsyncStorage.getItem('userKey')
        setUserKey(userKey)

      } catch (e) {
        // Restoring token failed
      }

    }

    bootstrapAsync()
  }, [])

  return (
    <NavigationContainer >
      {userKey == null ? (
        <AuthStack />
      ) : (
          <MainStack />
        )}
    </NavigationContainer>
  );
}

AuthStack

function AuthStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="ForgotPassword" component={ForgotPasswordScreen} />
            <Stack.Screen name="SignUp" component={SignUpScreen} />
        </Stack.Navigator>
    )
}

export default AuthStack

MainStack

function MainStack({ navigation, route }) {
    return (
        <Stack.Navigator>
            <Stack.Screen name='Home' component={HomeScreen} />
        </Stack.Navigator>
    )
}

export default MainStack

Answer 1

请尝试此操作，它将为您提供帮助，请检查此https://reactnavigation.org/docs/auth-flow/

newvideo.save((err, video) => {
        if (err) {
          res.status(500).json({
            message: { msgBody: "Error has occured", msgError: true },
          });
        } else {
          //get the id of inserted video
          let videoId = video._id;

          res.status(201).json({
            message: { msgBody: "Add success", msgError: false }, 
          });
        }
      });

该组件将如下所示：

import * as React from 'react';

const AuthContext = React.createContext();

Answer 2

这是使用 react-navigation v5 的最小身份验证设置。

import * as React from 'react';

import { Text, View, StyleSheet } from 'react-native';

import { Button, TextInput } from 'react-native-paper';

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import Constants from 'expo-constants';

const Stack = createStackNavigator();

const Auth = React.createContext(null);

export function Login() {
  const [email, setEmail] = React.useState('');
  const [pass, setPass] = React.useState('');
  
  const { setToken } = React.useContext(Auth)

  return (
    <View style={styles.container}>
      <TextInput
        label="Email"
        value={email}
        style={styles.input}
        onChangeText={(t) => setEmail(t)}
      />

      <TextInput
        label="Password"
        value={pass}
        style={styles.input}
        onChangeText={(t) => setPass(t)}
      />

      <Button mode="contained" onPress={() => setToken('Get the token and save!')}>Submit</Button>
    </View>
  );
}

export function Home() {
const { setToken } = React.useContext(Auth)

  return (
    <View>
      <Text>Home</Text>
      <Button mode="contained" onPress={() => setToken(null)}>Signout</Button>
    </View>
  );
}

export default function App() {
  const [token, setToken] = React.useState(null);

  return (
    <Auth.Provider value={{token, setToken}}>
      <NavigationContainer>
        <Stack.Navigator>
          {!token ? (
            <Stack.Screen name="Login" component={Login} />
          ) : (
            <Stack.Screen name="Home" component={Home} />
          )}
        </Stack.Navigator>
      </NavigationContainer>
    </Auth.Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingTop: Constants.statusBarHeight + 20,
    padding: 20,
  },
  input: {
    marginBottom: 20,
  },
});

这是一个工作示例。

https://snack.expo.io/@raajnadar/react-navigation-auth-example

注意 - 这是一个非常基本的设置，您必须对身份验证设置进行验证和正确的令牌检查，您不能依赖只有 2 个选项 true 或 false 的三元运算，您可能还有一个中间状态，如身份验证检查。

反应本机导航5身份验证流程

2 个答案: