React Navigation导航器之createSwitchNavigator

最新推荐文章于 2020-10-13 16:40:34 发布

原创最新推荐文章于 2020-10-13 16:40:34 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native #React Navigation #移动开发

React Navigation 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了React Navigation中SwitchNavigator的使用方法，包括其API参数、适用场景及示例代码。通过具体示例展示了如何创建SwitchNavigator并设置backBehavior属性，以实现从登录页跳转至首页后，按下返回键不会退回到登录页的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

API

createSwitchNavigator(RouteConfigs,SwitchNavigatorConfig)

参数说明

RouteConfigs

查看这里

SwitchNavigatorConfig

initialRouteName：第一次进入switchNavigator时显示的第一个页面，它的值应该是RouteConfigs的一个key
resetOnBlur：Boolean离开当前SwitchNavigator是否重置所有导航器的状态，默认true
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>
        )
    }
}