expo反应本机注销功能无法正常工作

时间：2019-10-04 10:41:40

标签： firebase react-native firebase-authentication expo

我正在开发expo react本机应用程序。在那里，我在注销时遇到问题。注销水龙头位于用户的个人资料部分中。根据当前代码，当我第一次登录该应用程序时，它将重定向到主导航（默认菜单）。如果我注销后登录到应用程序，它将重定向到配置文件部分。

  • 我尝试注销时导航到登录部分。它没有用。
  • 我每次注销时都尝试重新加载应用程序。它适用于ios，不适用于android。但是我感觉这样做不是一个好习惯。
//Using navigation
logOutPress() {
        var _this =this;
        firebase.auth().signOut().then(function () {
            // Sign-out successful.
            _this.props.navigation.navigate('Login');
            AsyncStorage.clear();
        }
    }

//Reloading
logOutPress() {
        var _this =this;
        firebase.auth().signOut().then(function () {
            // Sign-out successful.

            AsyncStorage.clear();
            Platform.OS == 'ios' ? NativeModules.DevSettings.reload() : '';
        }
    }

 //Create the required screens in StackNavigator
        var theScreen = createStackNavigator({
          Master: { screen: ({ navigation })=>(<MyMastSreen data={item} navigation={navigation} design={design} isRoot={true} />) },
          Categories: { screen: ({ navigation })=>(<MyCategoriesSreen data={item} navigation={navigation} design={design} isRoot={item.category_first} subMenus={[]} />) },
          MasterSUB: { screen: ({ navigation })=>(<MyCategoriesSreen data={{'categorySetup':item}} navigation={navigation} design={design} isRoot={true} subMenus={item.subMenus} />) },
          Details: { screen:({ navigation })=>(<MyDetailsSreen data={item} navigation={navigation} design={design} isRoot={true}/>) },
          DineIn: { screen:({ navigation})=>(<MyDineInScreen data={item} navigation={navigation} design={design} isRoot={true} />) },
          Gallery: { screen:({ navigation })=>(<MyGallerySreen data={item} navigation={navigation} design={design} />) },
          ForgetPassword: {screen: ForgetPassword},
          SignUp: { screen: SignUp }, 
          WebSub: { screen: ({ navigation })=>(<MyWebSreen data={item} navigation={navigation} design={design} isRoot={true} fromNotification={true} />) },
          NotificationsSub: { screen: ({ navigation })=>(<MyNotificationsSreen data={item} navigation={navigation} design={design} isRoot={false} />) },
          OrdersSub: { screen: ({ navigation })=>(<MyOrdersSreen data={item} navigation={navigation} design={design} isRoot={false} />) },
          TicketsSub: { screen: ({ navigation }) => (<MyTicketSreen data={item} userEmail={this.state.userEmail} navigation={navigation} design={design} isRoot={false} />) },
          OrderDetail: { screen: ({ navigation })=>(<MyOrderDetailSreen data={item} navigation={navigation} design={design}/>) },
          DineInOrders: { screen: ({ navigation })=>(<MyDineInOrderScreen data={item} navigation={navigation} design={design} isRoot={true} />) },
          // DineInOrderDetail: { screen: ({ navigation })=>(<MyDineInOrderDetailScreen data={item} navigation={navigation} design={design}/>) },
          ProfileSettingsSub: { screen:({ navigation })=>(<MyProfileSettingsSreen data={item} navigation={navigation} design={design} isRoot={false} />) },
          SubProfile: { screen: ({ navigation })=>(<MyProfileSreen data={item} navigation={navigation} design={design} isRoot={false} />)},
          ProfileSettings: { screen:({ navigation })=>(<MyProfileSettingsSreen data={item} navigation={navigation} design={design} />) },
          ListOfUsersSub: { screen:({ navigation })=>(<MyListOfUsersSreen data={item} navigation={navigation} design={design} />) },
          Chats: { screen:({ navigation })=>(<MyChatsSreen data={item} navigation={navigation} design={design} />) },
          Chat: { screen: ({ navigation })=>(<MyChatSreen data={item} navigation={navigation} design={design} />)},
          Gift: { screen: ({ navigation }) => (<MyGiftSreen data={item} userEmail={this.state.userEmail} navigation={navigation} design={design} />) },


        },{
          //initialRouteName:item.category_first?"Categories":(item.subMenus&&(item.subMenus.length>0?"MasterSUB":"Details")),
          initialRouteName:initialRootName,
          headerMode:"none",
          navigationOptions: {
            headerTintColor: 'blue',
          }
        });
      }

我想要的结果是注销后登录到应用程序时打开默认导航而不是配置文件部分。请帮助解决此问题。

谢谢。

1 个答案:

答案 0 :(得分：0)

尝试一下：

我在堆栈上没有看到对您的Login页的引用，因此将_this.props.navigation.navigate('Login');更改为_this.props.navigation.navigate('SignUp');

一种更好的方式来处理身份验证和堆叠导航

  1. 使用createSwitchNavigator处理您的根堆栈，对于您的应用程序来说，将是这样的：
const AppNavigator = createSwitchNavigator(
   {
      Loading: LoadingScreen,   // Include a loading screen that will check authentication state
      Auth: AuthNavigator,
      Main: MainNavigator
   },
   {
      initialRouteName: 'Loading',
      // Other configs
   }
)
  1. AuthStack将具有您的所有登录信息。注册，欢迎等屏幕，如下所示：
const AuthStack = createStackNavigator(
   {
        SignUp: { screen: SignUp },
        ForgetPassword: {screen: ForgetPassword},
        // Include other screens here if applicable
   },
   {
        initialRouteName: 'SignUp'
        // Other configs
   }
)
  1. MainStack将会显示您所有的应用程序屏幕，从您在问题中显示的内容来看，它看起来像这样：
const MainStack = createStackNavigator(
    {
          Master: { screen: ({ navigation })=>(<MyMastSreen data={item} navigation={navigation} design={design} isRoot={true} />) },
          Categories: { screen: ({ navigation })=>(<MyCategoriesSreen data={item} navigation={navigation} design={design} isRoot={item.category_first} subMenus={[]} />) },
          MasterSUB: { screen: ({ navigation })=>(<MyCategoriesSreen data={{'categorySetup':item}} navigation={navigation} design={design} isRoot={true} subMenus={item.subMenus} />) },
          Details: { screen:({ navigation })=>(<MyDetailsSreen data={item} navigation={navigation} design={design} isRoot={true}/>) },
          DineIn: { screen:({ navigation})=>(<MyDineInScreen data={item} navigation={navigation} design={design} isRoot={true} />) },
          Gallery: { screen:({ navigation })=>(<MyGallerySreen data={item} navigation={navigation} design={design} />) },
          WebSub: { screen: ({ navigation })=>(<MyWebSreen data={item} navigation={navigation} design={design} isRoot={true} fromNotification={true} />) },
          NotificationsSub: { screen: ({ navigation })=>(<MyNotificationsSreen data={item} navigation={navigation} design={design} isRoot={false} />) },
          OrdersSub: { screen: ({ navigation })=>(<MyOrdersSreen data={item} navigation={navigation} design={design} isRoot={false} />) },
          TicketsSub: { screen: ({ navigation }) => (<MyTicketSreen data={item} userEmail={this.state.userEmail} navigation={navigation} design={design} isRoot={false} />) },
          OrderDetail: { screen: ({ navigation })=>(<MyOrderDetailSreen data={item} navigation={navigation} design={design}/>) },
          DineInOrders: { screen: ({ navigation })=>(<MyDineInOrderScreen data={item} navigation={navigation} design={design} isRoot={true} />) },
          // DineInOrderDetail: { screen: ({ navigation })=>(<MyDineInOrderDetailScreen data={item} navigation={navigation} design={design}/>) },
          ProfileSettingsSub: { screen:({ navigation })=>(<MyProfileSettingsSreen data={item} navigation={navigation} design={design} isRoot={false} />) },
          SubProfile: { screen: ({ navigation })=>(<MyProfileSreen data={item} navigation={navigation} design={design} isRoot={false} />)},
          ProfileSettings: { screen:({ navigation })=>(<MyProfileSettingsSreen data={item} navigation={navigation} design={design} />) },
          ListOfUsersSub: { screen:({ navigation })=>(<MyListOfUsersSreen data={item} navigation={navigation} design={design} />) },
          Chats: { screen:({ navigation })=>(<MyChatsSreen data={item} navigation={navigation} design={design} />) },
          Chat: { screen: ({ navigation })=>(<MyChatSreen data={item} navigation={navigation} design={design} />)},
          Gift: { screen: ({ navigation }) => (<MyGiftSreen data={item} userEmail={this.state.userEmail} navigation={navigation} design={design} />) },
   },
   {
          initialRouteName: 'Master',   // <== Make sure to set this to the first screen you want on your application
          // Other configs
   }
)
  1. LoadingScreen应该看起来像这样：
class LoadingScreen extends React.Component {
    componentDidMount = async () => {
        const userId = await AsyncStorage.getItem('userId')
        this.props.navigation.navigate(userId ? 'Main' : 'Auth')   // This will check if there is any item stored with userId, if true it will navigate to Main else to Auth
    }

    render() {
        return (
            <View
                style={{
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                    backgroundColor: 'white'
                }}>
                <Text style={styles.textloadingStlye}>Loading Screen</Title>
            </View>
        )
    }
}
  1. 使用AsyncStorage进行的身份验证流程，当您首次登录或注册用户时，请确保在成功进行身份验证之后并在将其导航到主屏幕之前将其添加，如下所示：
.... // Firebase login, then
await AsyncStorage.setItem('userId', id);   // <== Here id is what you want to store of the user data for authentication, could be his db id or name or whatever you have
this.props.navigation.navigate('Loading');
  1. 您的Signout（现在终于可以退出）了：
logOutPress() {
   firebase.auth().signOut();   // <== This will signout from firebase
   AsyncStorage.clear();   // <== This will clear the userId from storage
   this.props.navigation.navigate('Loading');   // <== We navigate to the loading screen we set earlier, which will check if there is a userId and navigate accordingly 
}

注意：请记住，此设置中现在的主堆栈为AppNavigator，因此请确保强制转换export default createAppContainer(AppNavigator)

希望这会有所帮助！

相关问题
最新问题