React Navigation导航器之createSwitchNavigator
文章目录API参数说明RouteConfigsSwitchNavigatorConfig适用场景示例App.jsLogin.jsHome.jsAPIcreateSwitchNavigator(RouteConfigs,SwitchNavigatorConfig)参数说明RouteConfigs查看这里SwitchNavigatorConfiginitialRouteName:第...
·
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>
)
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)