Javascript React本机firebase身份验证处理

我正在尝试在我的Expo应用程序中创建一个简单的身份验证流

现在在我的应用程序中发生的事情是，我可以使用Firebase身份验证注册用户，但无法导航到经过身份验证的流。单击“注册”后不会发生任何事情，但我可以在firebase中看到用户

我一直在阅读React Navigaion文档，并尝试实现类似于他们为there所做的事情，但没有取得任何成功

我认为这个问题与我如何在App.js中获得令牌以及我对useEffect的使用有关

App.js

import React, { useEffect } from 'react';
import * as eva from '@eva-design/eva';
import { Provider as AuthProvider } from './src/context/AuthContext';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { ApplicationProvider } from '@ui-kitten/components';
import { NavigationContainer } from '@react-navigation/native';
import LandingScreen from './src/screens/LandingScreen';
import RegisterScreen from './src/screens/RegisterScreen';
import LoginScreen from './src/screens/LoginScreen';
import HomeScreen from './src/screens/HomeScreen';
import DetailScreen from './src/screens/DetailScreen';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

/*eslint-disable */
export default function App() {
  let token;
  useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const localSignin = async () => {
      try {
        token = await AsyncStorage.getItem('userToken');
      } catch (e) {
        // Restoring token failed
      }
    };
    console.log(token);
    localSignin();
  }, []);

  return (
    <ApplicationProvider {...eva} theme={eva.light}>
      <AuthProvider>
        <NavigationContainer>
          {token ? (
            <>
              <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={HomeScreen} />
                <Drawer.Screen name="Details" component={DetailScreen} />
              </Drawer.Navigator>
            </>
          ) : (
            <>
              <Stack.Navigator>
                <Stack.Screen name="Landing" component={LandingScreen} />
                <Stack.Screen name="Register" component={RegisterScreen} />
                <Stack.Screen name="Login" component={LoginScreen} />
              </Stack.Navigator>
            </>
          )}
        </NavigationContainer>
      </AuthProvider>
    </ApplicationProvider>
  );
}

import React，{useffect}来自“React”；
从“@eva design/eva”导入*作为eva；
从“./src/context/AuthContext”导入{Provider as AuthProvider}；
从'@react导航/drawer'导入{createDrawerNavigator}；
从'@react navigation/stack'导入{createStackNavigator}；
从“@ui kitten/components”导入{ApplicationProvider}；
从'@react-navigation/native'导入{NavigationContainer}；
从“/src/screens/LandingScreen”导入着陆屏幕；
从“/src/screens/RegisterScreen”导入注册表屏幕；
从“/src/screens/LoginScreen”导入LoginScreen；
从“./src/screens/HomeScreen”导入主屏幕；
从“./src/screens/DetailScreen”导入DetailScreen；
const Drawer=createDrawerNavigator（）；
const Stack=createStackNavigator（）；
/*eslint禁用*/
导出默认函数App（）{
让代币；
useffect（（）=>{
//从存储器中取出令牌，然后导航到适当的位置
const localSignin=async（）=>{
试一试{
token=等待AsyncStorage.getItem（'userToken'）；
}捕获（e）{
//还原令牌失败
}
};
console.log（令牌）；
localSignin（）；
}, []);
返回(
{代币(
) : (
)}
);
}

我应该在这里的某个地方使用AuthContext吗？我对react开发非常陌生，因此如果这有点不清楚，我很抱歉。

您的“令牌”是异步操作的，因此它应该是一个状态变量，以便您的组件在更改时可以重新呈现。要实现这一点，您应该将您的令牌声明替换为

const [token, setToken] = React.useState(undefined);

之后，当您想要更改令牌时，不要重新分配给令牌变量，而是使用所需的值调用setToken。像这样：

setToken(await AsyncStorage.getItem('userToken'));

最后的代码应该是这样的

import React, { useEffect } from 'react';
import * as eva from '@eva-design/eva';
import { Provider as AuthProvider } from './src/context/AuthContext';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import { ApplicationProvider } from '@ui-kitten/components';
import { NavigationContainer } from '@react-navigation/native';
import LandingScreen from './src/screens/LandingScreen';
import RegisterScreen from './src/screens/RegisterScreen';
import LoginScreen from './src/screens/LoginScreen';
import HomeScreen from './src/screens/HomeScreen';
import DetailScreen from './src/screens/DetailScreen';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();

/*eslint-disable */
export default function App() {
  const [token, setToken] = React.useState(undefined);
  useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const localSignin = async () => {
      try {
        setToken(await AsyncStorage.getItem('userToken'));
      } catch (e) {
        // Restoring token failed
      }
    };
    console.log(token);
    localSignin();
  }, []);

  return (
    <ApplicationProvider {...eva} theme={eva.light}>
      <AuthProvider>
        <NavigationContainer>
          {token ? (
            <>
              <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={HomeScreen} />
                <Drawer.Screen name="Details" component={DetailScreen} />
              </Drawer.Navigator>
            </>
          ) : (
            <>
              <Stack.Navigator>
                <Stack.Screen name="Landing" component={LandingScreen} />
                <Stack.Screen name="Register" component={RegisterScreen} />
                <Stack.Screen name="Login" component={LoginScreen} />
              </Stack.Navigator>
            </>
          )}
        </NavigationContainer>
      </AuthProvider>
    </ApplicationProvider>
  );
}

import React，{useffect}来自“React”；
从“@eva design/eva”导入*作为eva；
从“./src/context/AuthContext”导入{Provider as AuthProvider}；
从'@react导航/drawer'导入{createDrawerNavigator}；
从'@react navigation/stack'导入{createStackNavigator}；
从“@ui kitten/components”导入{ApplicationProvider}；
从'@react-navigation/native'导入{NavigationContainer}；
从“/src/screens/LandingScreen”导入着陆屏幕；
从“/src/screens/RegisterScreen”导入注册表屏幕；
从“/src/screens/LoginScreen”导入LoginScreen；
从“./src/screens/HomeScreen”导入主屏幕；
从“./src/screens/DetailScreen”导入DetailScreen；
const Drawer=createDrawerNavigator（）；
const Stack=createStackNavigator（）；
/*eslint禁用*/
导出默认函数App（）{
const[token，setToken]=React.useState（未定义）；
useffect（（）=>{
//从存储器中取出令牌，然后导航到适当的位置
const localSignin=async（）=>{
试一试{
setToken（wait AsyncStorage.getItem（'userToken'）；
}捕获（e）{
//还原令牌失败
}
};
console.log（令牌）；
localSignin（）；
}, []);
返回(
{代币(
) : (
)}
);
}

感谢您的回复。这没什么用。你有没有碰巧看到这个项目的链接？我把令牌作为AuthContext.js的一部分，不知道我是否应该在那里使用令牌，而不是您在这里提到的方式？此处使用效果中的console.log将令牌显示为未定义。而Im措辞如果我在此处使用该AuthContext您的AuthContext，则您正在存储response.user.getIdToken（）的值。该方法返回一个承诺，然后您应该“等待”它。我将在完成调试后编辑答案关于在App.js中使用AuthContext，以实现您可以将AuthContext用作ContextConsumer，或将App.js拆分为两个组件（您不能在应用程序中使用useContext钩子，因为它没有被您的提供商包围）哈哈，好吧，我需要更多的阅读，因为我不知道你把App.js分成两个组件是什么意思。对我来说，这似乎是更好的处理方式？