Question

我想在我的应用程序中设置身份验证，所以我使用的是Firebase（一般来说，我是Firebase和身份验证的新手）。

当我打开应用程序时，由于某种原因，它已经登录并显示AppStack，而不是AuthStack（应该是LoginScreen）。当我在组件上的AppStack中运行此代码时：

onPress={() => {firebase.auth().signOut().then(function() {
  console.log('Signed Out');
}, function(error) {
  console.error('Sign Out Error', error);
});}}>

它成功登录了“已注销”，但不会切换屏幕。

我知道问题出在我的状态变量isLoggedIn上，但我不知道如何解决。

这就是我的app.js，非常感谢您提供有关如何实现此效果的反馈。

import * as React from "react";
...
import * as firebase from 'firebase';

var firebaseConfig = {
    ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

function AuthStack() {

    return(
    <Stack.Navigator>
        <Stack.Screen name="Login" 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>)}


export default class App extends React.Component {
    state = {
        isLoggedIn: firebase.auth().onAuthStateChanged(user => { return user}),
    }

    render() {
    return(
        <NavigationContainer>
            { this.state.isLoggedIn ? (<AppStack />) : (<AuthStack />) }
        </NavigationContainer>
    )}
}


function Notifications() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Notifications</Text>
        </View>
    );
}

Answer 1

您可以做的一件事是：

export default class App extends React.Component {
    state = {
        isLoggedIn: false,
    }

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

    render() {
    return(
        <NavigationContainer>
            { this.state.isLoggedIn ? (<AppStack />) : (<AuthStack />) }
        </NavigationContainer>
    )}
}

React Native + Firebase-注销后如何导航到登录屏幕？

1 个答案: