1 
expo: ^32.0.0
react: 16.5.0
react-navigation: ^3.11.0

你好！当我启动我的应用程序时，我需要在没有身份验证的情况下进入主页。之后，我有一个 DrawerNavigator 调度调度以下屏幕：

  • 帐户（需要身份验证）
  • 商店（需要授权）

我的导航背景：

我使用 createDrawerNavigator 作为主要导航来调度：

Home (don't need auth) => call Home screen
Account (need auth) => call SwitchNavigator with Params
Shops (need auth) => call SwitchNavigator with Params

代码：

  {
    Home: { screen: Home },
    Account: AppAccessSwitchNavigator('Account'),
    Shops: AppAccessSwitchNavigator('Shops')
  },
  {
    contentComponent: Menu,
    drawerBackgroundColor: 'transparent',
    drawerType: 'front'
  }
));

当我去 Account 或 Shops SwitchNavigator 调用 AuthLoading 屏幕作为这个文档https://reactnavigation.org/docs/en/authflow.html

我的 AuthLoading 会从 Drawer 中获取一个参数来发送，如果我是 auth 到好屏幕或 Auth Stack

const AppAccessSwitchNavigator = (route) => createSwitchNavigator(
  {
    AuthLoading: {
      screen: (props) => <Loading {...props} route={route} />,
    },
    // AuthLoading: Loading,
    Account: Account,
    EditAccount: EditAccount,
    Shops: Shops, 
    EditShop: EditShop,
    SignUp: SignUp,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
)

const AuthStack = createStackNavigator({ 
    SignIn: SignIn,
    SignUp: SignUp
});

让我们尝试登录和注销：

如果我不是 auth 我去登录屏幕并返回到我的初始目标屏幕（例如商店），那么我的 switchNavigator 现在是 Mount，太棒了！

现在总是在我的商店屏幕上注销没关系我重定向到登录屏幕但是如果我去帐户屏幕我仍然登录因为我的堆栈总是挂载所以我没有传递给我的 initalRoute (AuthLoading) 来检查我是否'am auth or no。所以我也必须在我的帐户屏幕中注销！

问题与其他方式相同：现在我在商店屏幕和帐户屏幕中注销。如果我登录商店屏幕，我会进入商店屏幕，但现在如果我进入帐户屏幕，我仍然在我的登录屏幕中。

我的 AuthLoading 文件：


  constructor() {
    super();
    this._bootstrapAsync();
  }



  // Fetch the token from storage then navigate to our appropriate place
  _bootstrapAsync = async () => {
    const userToken = await AsyncStorage.getItem('userToken');
    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(userToken ? this.props.route : 'Auth');
  };

  // Render any loading content that you like here
  render() {
    console.log("LOADING ")
    return (
      <>
        <NavigationEvents
          onWillFocus={() => this._bootstrapAsync() }
        />
        <View style={styles.container}>
          <ActivityIndicator />
          <StatusBar barStyle="default" />
        </View>
      </>
    );
  }
}

我的路由器文件：

  SignIn: SignIn,
  SignUp: SignUp
});


const AppAccessSwitchNavigator = (route) => createSwitchNavigator(
  {
    AuthLoading: {
      screen: (props) => <Loading {...props} route={route} />,
    },
    // AuthLoading: Loading,
    Account: Account,
    EditAccount: EditAccount,
    Shops: Shops, 
    EditShop: EditShop,
    SignUp: SignUp,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
)


const NavigationRoot = createAppContainer(createDrawerNavigator(
  {
    Home: { screen: Home },
    Account: AppAccessSwitchNavigator('Account'),
    Shops: AppAccessSwitchNavigator('Shops')
  },
  {
    contentComponent: Menu,
    drawerBackgroundColor: 'transparent',
    drawerType: 'front'
  }
));
4

0 回答 0