Блог

Я пытаюсь выполнить аутентификацию пользователя с помощью 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. Это может произойти, если вы вернете компонент вместо отрисовки. Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее.

Это связано с тем, что React ожидается, что компонент будет возвращен из App функции, но здесь вы возвращаете firebase.auth().onAuthStateChanged() то, что в конечном итоге не возвращает никакого компонента. Это( onAuthStateChanged ) помогает зарегистрировать прослушиватель для изменения состояния аутентификации пользователя и возвращает метод для отмены подписки на прослушиватель аутентификации firebase при отключении компонента(или всякий раз, когда вы хотите удалить прослушиватель состояния аутентификации).

Вы можете проверить эту ссылку для получения более подробной информации.

В вашем примере вы можете сделать это примерно так:

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