React Native 和 firebase 身份验证导航

Question

我正在尝试使用 Firebase + Expo 进行用户身份验证。

目前正在处理身份验证流程，但我不断收到我似乎无法修复的错误:(

    import { StatusBar } from 'expo-status-bar';
    import React from 'react';
    import { StyleSheet, Text, View } from 'react-native';
    import {login} from './login';
    import {pageOne} from './pageOne';
    import {pageTwo} from './pageTwo';
    import 'react-native-gesture-handler';
    import { createStackNavigator } from '@react-navigation/stack';
    import { NavigationContainer } from '@react-navigation/native';
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
    import {firebase} from './fbConfig';




    const Stack = createStackNavigator();
    const Tab = createBottomTabNavigator();


    export default function App() {

      return (


    firebase.auth().onAuthStateChanged((authenticate)=>{


      if (authenticate) {

      
        <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen
            name="PageOne"
            component={pageOne}
          />
          <Tab.Screen
            name="PageTwo"
            component={pageTwo}
          />
       
        </Tab.Navigator>
      </NavigationContainer>
      
      
      } else  
        {
          
        <NavigationContainer>
          <Stack.Navigator>
            <Stack.Screen
              name="Login"
              component={login}
            />
            </Stack.Navigator>
        </NavigationContainer>
        
        }

      })

      );
    }






    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      },
    });

它当前显示错误：

警告：函数作为 React 子项无效。如果您 return 一个组件而不是来自渲染，则可能会发生这种情况。或者您可能打算调用此函数而不是 return 它。

Answer 1

这是因为 React 期望从 App 函数 returned 一个组件，但在这里你 returning firebase.auth().onAuthStateChanged()最终没有 return 任何组件。它（onAuthStateChanged）有助于为用户的身份验证状态更改注册一个侦听器，并且 return 是一种在组件卸载时取消订阅 firebase 身份验证侦听器的方法（或者每当您想删除身份验证状态侦听器时） .

您可以查看 this link 了解更多详情。

在您的示例中，您可以这样做：

import React, {useState} from 'react';
import { StyleSheet} from 'react-native';
import { login } from './login';
import { pageOne } from './pageOne';
import { pageTwo } from './pageTwo';
import 'react-native-gesture-handler';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { firebase } from './fbConfig';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

export default function App() {
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState();

  function onAuthStateChanged(user) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  if (initializing) return null;

  if (!user) {
    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Login"
            component={login}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="PageOne"
          component={pageOne}
        />
        <Tab.Screen
          name="PageTwo"
          component={pageTwo}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

React Native 和 firebase 身份验证导航

React Native and firebase Authentication navigation

javascript

react-native

firebase-authentication

react-navigation