向createStackNavigator添加方法

Question

我希望添加一些方法来处理createStackNavigator返回的组件的身份验证。我该怎么做呢？

似乎在这个级别上做这件事是有意义的，因为它是包含整个应用程序的组件。

Answer 1

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

然而，还有另一种方法可以做到这一点。即有3个导航器: RootNavigator、LoggedInNavigator和LoggedOutNavigator。您可以通过发送指定用户是否通过身份验证的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"
  });
};