Firebase 身份验证 - 如何构建我的反应原生应用程序？

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 发送有关用户出生日期等的一些数据之前，注册屏幕会卸载。

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

我这样做总体上是正确的还是完全错误的？任何帮助深表感谢。提前谢谢你。

Answer 1

我认为你需要做的是setState之后进行异步调用

所以您需要发出一个异步请求（同时可以显示加载屏幕），然后在完成后将状态设置为新视图。

Answer 2

你可以在你的状态下只拥有第二个属性，比如userDataSent，它也需要是true才能显示AppStack。

然后你只设置userDataSent，一旦你知道你已经在你的服务器上发送/接收了数据。

您可以将userDataSent 存储为true 或AsyncStorage 中的其他内容，并在应用程序从冷加载时检索它，并每次自动更新您的状态。

可能是最简单的方法来适应你所拥有的！