Question

我正在尝试在Expo应用程序中创建一个简单的Auth流。

I've reacreated my project here so you can see what I am doing

现在，我的应用程序中发生的事情是我可以使用Firebase身份验证注册用户，但无法导航到已验证的流。单击注册后没有任何反应，但是我可以在firebase中看到该用户。

我一直在阅读React Navigaion文档，并尝试实现类似于他们在Auth flow那里所做的工作，但是并没有成功。

我认为问题与我如何在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>
  );
}

我应该在这里的某个地方使用AuthContext吗？我对开发工作非常陌生，所以如果这还不清楚，我感到抱歉。

Answer 1

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

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

React Native Firebase身份验证处理

1 个答案: