React Navigation 指南 8：SwitchNavigator

认证屏幕

大多数应用程序都要求用户通过某种方式进行身份验证才能访问与用户或其他私人内容相关的数据。通常情况下，流程如下所示：

• 用户打开该应用程序。
• 该应用程序从持久性存储装载一些身份验证状态（例如，AsyncStorage）。
• 当状态被加载时，根据是否加载有效的认证状态，向用户呈现认证屏幕或主应用程序。
• 当用户注销时，我们清除认证状态并将其发送回认证屏幕。

广告页

在启动app的时候通常会加入广告页面，但是在进入主页之后并不希望按返回键的再回到广告页，针对这种需求有两种做法：

• 跳转之后重置路由
• 使用SwitchNavigator

针对以上两种需求，都可以使用官方提供的SwitchNavigator很好的解决

SwitchNavigator

SwitchNavigator默认情况下不处理回退操作，也就是说A -> B -> C 的过程中，无法回退。

createSwitchNavigator(RouteConfigs, SwitchNavigatorConfig);

RouteConfigs

路由配置

SwitchNavigatorConfig

• initialRouteName – 第一次加载时初始选项卡路由的routeName。
• resetOnBlur – 切换离开屏幕时，重置所有嵌套导航器的状态。默认为true。
• paths – 提供routeName到path config的映射，它覆盖routeConfigs中设置的路径。
• backBehavior – 后退按钮是否会导致标签切换到初始路由？如果是，则设置为initialRoute，否则none。默认为none。

案例：

class Home extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Home
        </Text>
        <Button
          title='go'
          onPress={() => { this.props.navigation.navigate('Demo') }}
        />
      </View>
    );
  }
}

class Demo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Demo
        </Text>
        <Button
          title='go'
          onPress={() => { this.props.navigation.navigate('Welcome') }}
        />
      </View>
    );
  }
}

class Welcome extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome
        </Text>
        <Button
          title='go'
          onPress={() => { this.props.navigation.navigate('Welcome1') }}
        />
      </View>
    );
  }
}

class Welcome1 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome1
        </Text>
        <Button
          title='go'
          onPress={() => { this.props.navigation.navigate('Home') }}
        />
      </View>
    );
  }
}

const AppStack = createStackNavigator({
  Home,
  Demo
})

const RootStack = createSwitchNavigator({
  Welcome,
  Welcome1,
  App: AppStack
})



export default class App extends Component {
  render() {
    return (
      <RootStack onNavigationStateChange={(prevState, currentState) => { console.log(currentState) }} />
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});