React Native and firebase Authentication navigation

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子类无效。如果你返回一个组件而不是从渲染中返回，可能会发生这种情况。或者你想调用这个函数而不是返回它。

Answer 1

这是因为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',
},
});