Firebase 身份驗證 - 如何構建我的反應原生應用程序？

Question

希望你們都平安。

我的應用程序目前使用 React Navigation 5.0 在屏幕之間導航的這種方式：

首先，它在身份驗證 state 更改時執行此操作：

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在進行異步調用后

所以你需要發出一個異步請求（同時可以顯示加載屏幕）然后完成后，將 state 設置為新視圖。

Answer 2

您可以在 state 中有第二個屬性，例如userDataSent ，它也需要為true才能顯示AppStack 。

然后你只設置userDataSent ，一旦你知道你已經在你的服務器上發送/接收了數據。

您可以將userDataSent存儲為true或 AsyncStorage 中的內容，並在應用程序從冷加載時檢索它，並每次自動更新您的 state。

可能是適應你所擁有的最簡單的方法！