Firebase身份验证-如何构建我的React Native应用程序？

Question

希望大家都很安全。

我的应用当前使用这种方式通过React Navigation 5.0在屏幕之间进行导航：

首先，它在身份验证状态更改时执行此操作：

firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.setState({ isLoggedIn: true })
            } else {
                this.setState({ isLoggedIn: false })
            }
        })

然后，如果用户已登录，它将显示AppStack，否则将显示AuthStack，这是登录和注册屏幕。

render() {
        return (
            <NavigationContainer>
                {this.state.loading ? (<LoadingScreen />) : this.state.isLoggedIn ? (<AppStack />) : (<AuthStack />)}
            </NavigationContainer>
        )
    }
function AuthStack() {
    return (
        <Stack.Navigator>
            <Stack.Screen name="LoginReg" component={LoginScreen} options={{ headerShown: false }} />
        </Stack.Navigator>)
}

function AppStack() {
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    if (route.name === 'Order') {
                        return (
                            <IconWithBadge
                                name={focused ? 'ios-book' : 'ios-book'}
                                size={size}
                                color={color}
                            />
                        );
                    } else if (route.name === 'Map') {
                        return (
                            <Ionicons
                                name={focused ? 'md-globe' : 'md-globe'}
                                size={size}
                                color={color}
                            />
                        );
                    } else if (route.name === 'Profile') {
                        return (
                            <Ionicons
                                name={focused ? 'md-contact' : 'md-contact'}
                                size={size}
                                color={color}
                            />
                        )
                    } else if (route.name === 'Notifications') {
                        return (
                            <Ionicons
                                name={focused ? 'ios-notifications-outline' : 'ios-notifications-outline'}
                                size={size}
                                color={color}
                            />
                        )
                    }
                },
            })}
            tabBarOptions={{
                activeTintColor: 'orange',
                inactiveTintColor: 'gray',
            }}>
            <Tab.Screen name="Order" component={OrderScreen} />
            <Tab.Screen name="Map" component={MapScreen} />
            <Tab.Screen name="Profile" component={ProfileScreen} />
            <Tab.Screen name="Notifications" component={Notifications} />
        </Tab.Navigator>)
}

现在，当用户注册时，firebase会对用户进行身份验证并自动登录。因此，在我设法向Firestore发送有关用户的出生日期等数据之前，将取消注册屏幕。

我在线上检查了许多文章和文档，但我仍然不知道什么是处理这种情况的最有效方法，以便我也可以在卸载注册屏幕之前运行一些代码。

我总体上是正确执行此操作还是完全错误？任何帮助深表感谢。预先谢谢你。

希望大家都很安全。我的应用程序当前使用此方法通过React Navigation 5.0在屏幕之间导航：首先，它在身份验证状态更改时执行此操作：firebase.auth（）....

Answer 1

我认为您需要做的是setState after

Answer 2

您可能只是在状态中具有第二个属性，例如userDataSent，为了显示true，也必须为AppStack。