Question

我正在寻找添加方法来处理对createStackNavigator返回的组件的身份验证。我该怎么办？

在此级别执行此操作似乎很有意义，因为它是容纳整个应用程序的组件。

Answer 1

react-navigation中有一个称为“切换导航器”的东西，它可以帮助您可以根据用户的身份选择导航器。例如，假设我们有两个导航器LoggedInNavigator和LoggedOutNavigator，则可以使用SwtichNavigator根据身份验证状态在这些导航器之间切换。

不过，还有另一种方法可以做到这一点。即有3个导航器。 RootNavigator，LoggedInNavigator，LoggedOutNavigator。您可以通过发送一个var来设置导航器的默认路由，该var指定用户是否通过身份验证。

在App.js中

import { CreateRootNavigator } from RootNavigator.js; // the below file
class App extends React.component {
   render() {
      const isAuthenticated = this._getAuthState(); // contains a boolean variable if user is authenticated or not
      const RootNavigator = createRootNavigator(isAuthenticated)
      return {
        <RootNavigator />
      }
   }
}
export default App;

在RootNavigator.js中

import { LoggedInNavigator } from "./LoggedInNavigation";
import { LoggedOutNavigator } from "./LoggedOutNavigation";

export const CreateRootNavigator = (loggedIn = false) => {
   return createStackNavigator(
   {
    LoggedIn: {
     screen: LoggedInNavigator,
     navigationOptions: {
      gesturesEnabled: false
     }
    },
    LoggedOut: {
     screen: LoggedOutNavigator,
     navigationOptions: {
      gesturesEnabled: false
     }
    }
  },
  {
   headerMode: "none",
   mode: "modal",
   initialRouteName: loggedIn ? "LoggedIn" : "LoggedOut"
  }
 );
};

添加方法到createStackNavigator

1 个答案: