React Navigation导航器之createSwitchNavigator

API

createSwitchNavigator(RouteConfigs,SwitchNavigatorConfig)

参数说明

RouteConfigs

查看这里

SwitchNavigatorConfig

1. initialRouteName：第一次进入switchNavigator时显示的第一个页面，它的值应该是RouteConfigs的一个key
2. resetOnBlur：Boolean离开当前SwitchNavigator是否重置所有导航器的状态，默认true
3. backBehavior：用于设置按下返回键时的动作。值为"initialRoute"时按下返回键回到initialRouteName对应的页面；值为"none"时返回上一页。默认"none"

适用场景

当backBehavior的值为默认值none时，从注册或登录页面跳转到首页后按下系统返回键不退回到注册或登录页面

示例

App.js

import React from 'react'
import {
    createStackNavigator,
    createSwitchNavigator,
    createAppContainer
} from 'react-navigation'
import Home from "./components/Home";
import Login from "./components/Login";

const LoginNavigator = createStackNavigator({
    Login:{
        screen:Login,
        navigationOptions: {
            title: '登录'
        }
    }
},{
    headerLayoutPreset:"center"
})
const HomeNavigator = createStackNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: {
                title: "首页"
            }
        }
    },{
        headerLayoutPreset:"center"
    }
)
const SwitchNavigator = createSwitchNavigator({
    Login: {
        screen:LoginNavigator
    },
    Home:{
        screen:HomeNavigator
    }
},{
    backBehavior:"none"
})
export default createAppContainer(SwitchNavigator)

Login.js

import React from 'react'
import {View, Text, Button} from 'react-native'

export default class Login extends React.Component{
    render(){
        return(
            <View>
                <Text>Login</Text>
                <Button title={'登录'} onPress={()=>{
                    this.props.navigation.navigate("Home")
                }}/>
            </View>
        )
    }
}

Home.js

import React from 'react'
import {View, Text, Button} from 'react-native'

export default class Home extends React.Component{
    render(){
        return (
            <View>
                <Text>Home</Text>
                <Text>此时按下返回键，退出应用</Text>
            </View>
        )
    }
}