React native React Native Navigation 5身份验证流

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

根据文档，用户似乎会在验证后立即导航到应用程序，但这似乎不起作用

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>
  );
}

import React，{useState，useffect}来自“React”；
从“@react native community/async storage”导入异步存储；
从'@react-navigation/native'导入{NavigationContainer}；
从“./src/navigation/AuthStack”导入AuthStack
从“./src/navigation/MainStack”导入MainStack
导出默认函数App（{navigation}）{
const[userKey，setUserKey]=useState（null）
useffect（（）=>{
const bootstrapAsync=async（）=>{
试一试{
让userKey=wait AsyncStorage.getItem（'userKey'）
设置用户密钥（用户密钥）
}捕获（e）{
//还原令牌失败
}
}
bootstrapAsync（）
}, [])
返回(
{userKey==null(
) : (
)}
);
}

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

函数AuthStack（）{
返回(
)
}
导出默认AuthStack

中流砥柱

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

export default MainStack

function-MainStack（{navigation，route}）{
返回(
)
}
导出默认主堆栈

请尝试此项，它将帮助您检查此项

组件将如下所示：

import * as React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App({ navigation }) {
  const [state, dispatch] = React.useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'RESTORE_TOKEN':
          return {
            ...prevState,
            userToken: action.token,
            isLoading: false,
          };
        case 'SIGN_IN':
          return {
            ...prevState,
            isSignout: false,
            userToken: action.token,
          };
        case 'SIGN_OUT':
          return {
            ...prevState,
            isSignout: true,
            userToken: null,
          };
      }
    },
    {
      isLoading: true,
      isSignout: false,
      userToken: null,
    }
  );

  React.useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const bootstrapAsync = async () => {
      let userToken;

      try {
        userToken = await AsyncStorage.getItem('userToken');
      } catch (e) {
        // Restoring token failed
      }

      
      dispatch({ type: 'RESTORE_TOKEN', token: userToken });
    };

    bootstrapAsync();
  }, []);

  const authContext = React.useMemo(
    () => ({
      signIn: async data => {
      // store token in Async storage
        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
      signOut: () => dispatch({ type: 'SIGN_OUT' }),
      signUp: async data => {
        // Remove token from Async storage
        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
    }),
    []
  );

  return (
    <AuthContext.Provider value={authContext}>
      <Stack.Navigator>
        {state.userToken == null ? (
          <Stack.Screen name="SignIn" component={SignInScreen} />
        ) : (
          <Stack.Screen name="Home" component={HomeScreen} />
        )}
      </Stack.Navigator>
    </AuthContext.Provider>
  );
}

import*as React from'React'；
从“@react native async storage/async storage”导入异步存储；
导出默认函数App（{navigation}）{
const[state，dispatch]=React.useReducer(
（状态、动作）=>{
开关（动作类型）{
案例“还原令牌”：
返回{
…国家，
userToken:action.token，
孤岛加载：false，
};
“签到”案例：
返回{
…国家，
isSignout:错，
userToken:action.token，
};
“注销”案例：
返回{
…国家，
是的，
userToken:null，
};
}
},
{
孤岛加载：是的，
isSignout:错，
userToken:null，
}
);
React.useffect（（）=>{
//从存储器中取出令牌，然后导航到适当的位置
const bootstrapAsync=async（）=>{
让userToken；
试一试{
userToken=await AsyncStorage.getItem（'userToken'）；
}捕获（e）{
//还原令牌失败
}
分派（{type:'RESTORE_TOKEN'，TOKEN:userToken}）；
};
bootstrapAsync（）；
}, []);
const authContext=React.useMoom(
() => ({
签名：异步数据=>{
//在异步存储中存储令牌
分派（{type:'SIGN_IN'，token:'dummy auth token'}）；
},
签出：（）=>dispatch（{type:'SIGN_OUT'}），
注册：异步数据=>{
//从异步存储中删除令牌
分派（{type:'SIGN_IN'，token:'dummy auth token'}）；
},
}),
[]
);
返回(
{state.userToken==null(
) : (
)}
);
}

这不起作用，当我注销时，我仍然不会导航出应用程序。当您注销时，请使用此函数signout（），并在signout（）函数中清除您的令牌。

import * as React from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App({ navigation }) {
  const [state, dispatch] = React.useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'RESTORE_TOKEN':
          return {
            ...prevState,
            userToken: action.token,
            isLoading: false,
          };
        case 'SIGN_IN':
          return {
            ...prevState,
            isSignout: false,
            userToken: action.token,
          };
        case 'SIGN_OUT':
          return {
            ...prevState,
            isSignout: true,
            userToken: null,
          };
      }
    },
    {
      isLoading: true,
      isSignout: false,
      userToken: null,
    }
  );

  React.useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const bootstrapAsync = async () => {
      let userToken;

      try {
        userToken = await AsyncStorage.getItem('userToken');
      } catch (e) {
        // Restoring token failed
      }

      
      dispatch({ type: 'RESTORE_TOKEN', token: userToken });
    };

    bootstrapAsync();
  }, []);

  const authContext = React.useMemo(
    () => ({
      signIn: async data => {
      // store token in Async storage
        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
      signOut: () => dispatch({ type: 'SIGN_OUT' }),
      signUp: async data => {
        // Remove token from Async storage
        dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
      },
    }),
    []
  );

  return (
    <AuthContext.Provider value={authContext}>
      <Stack.Navigator>
        {state.userToken == null ? (
          <Stack.Screen name="SignIn" component={SignInScreen} />
        ) : (
          <Stack.Screen name="Home" component={HomeScreen} />
        )}
      </Stack.Navigator>
    </AuthContext.Provider>
  );
}