React Native Navigation 5 身份验证流程答案

【问题标题】：React Native Navigation 5 Authentication FlowReact Native Navigation 5 身份验证流程
【发布时间】：2021-02-23 23:35:19
【问题描述】：

我似乎无法对我的 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>
  );
}

授权栈

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

主堆栈

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

export default MainStack

【问题讨论】：

标签： react-native authentication react-navigation-v5

【解决方案1】：

这是使用 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

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

【讨论】：