React Native firebase 身份驗證處理

Question

我正在嘗試在我的 Expo 應用程序中創建一個簡單的身份驗證流程。

我在這里重新創建了我的項目，所以你可以看到我在做什么

現在在我的應用程序中發生的事情是我可以使用 Firebase 身份驗證注冊用戶，但無法導航到經過身份驗證的流程。 單擊注冊后沒有任何反應，但我可以在 firebase 中看到用戶。

我一直在閱讀 React Navigaion 文檔並嘗試實現類似於他們在那里為Auth 流程所做的事情，但沒有取得任何成功。

我認為這個問題與我如何在 App.js 中獲取令牌以及我對 useEffect 的使用有關

應用程序.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

您的“令牌”是異步操作的，因此它應該是一個 state 變量，因此您的組件在更改時可能會重新呈現。 為此，您應該將令牌聲明替換為

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