createStackNavigator语法
- createStackNavigator(
RouteConfigs,StackNavigatorConfig
)
参数说明
RouteConfigs
- RouteConfigs —— 路由名称到路由配置的一个映射
示例{ Home:{ //这是一个首页路由配置项 screen:Home,//必填项 Home是react的一个组件 path:'',//选填项深度连接或webAPP中起作用 navigationOptions:{//选填项 //配置项... } } Detail:{ //这是一个详情页路由配置项 screen:Detail,//必填项 Detail是react的一个组件 path:'',//选填项深度连接或webAPP中起作用 navigationOptions:{//选填项 //配置项... } } }
navigationOptions配置项参数说明
- title:StackNavigator中表示头部标题,TabNavigator中表示tab文字,DrawerNavigator
StackNavigatorConfig
- initialRouteName 可选字符串类型:设置首页,它的值应该是routeConfig中的一个key值如:“Home”
- initialRouteParams 可选对象类型:首页的默认参数
- initialRouteKey 初始页面的可选标识符
- defaultNavigationOptions 可选对象类型:用于设置页面header的公共样式
- mode 定义页面打开和关闭时的风格:card:默认值;modal从底部滑入,仅iOS起作用
- headerMode 设置header渲染时的风格:float:一直渲染一个header,当页面切换时有一个动画效果(iOS的默认效果);screen:每个页面渲染一个header,当页面切换时跟随页面一块切换(Android默认效果);none:不渲染页面header
- headerBackTitleVisible 打开新的页面后只能的判断是否显示回退按钮旁边的文字,也可以使用true或false来强制设置
- headerLayoutPreset 定义页面头title文字的位置:left:title居左;center:title居中
- cardStyle:定义页面的样式(背景色等)
- cardShadowEnabled:
Boolean
默认true
- cardOverlayEnabled:
Boolean
默认false
- onTransitionStart:Function 页面动画开始时调用
- onTransitionEnd:Function 页面动画结束时调用
示例
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>
<Button title={'跳转到详情页'} onPress={()=>{
this.props.navigation.navigate('Detail')
}}/>
</View>
)
}
}
Detail.js
import React from 'react'
import {View, Text, Button} from 'react-native'
export default class Detail extends React.Component{
render(){
return (
<View>
<Text>Detail</Text>
<Button title={'跳转到首页'} onPress={()=>{
this.props.navigation.navigate('Home')
}}/>
</View>
)
}
}
App.js
import React from 'react'
import {createStackNavigator,createAppContainer} from 'react-navigation'
import Home from './components/Home'
import Detail from './components/Detail'
const StackNavigation = createStackNavigator({
Home:{
screen:Home,
navigationOptions:{
title:"首页"
}
},
Detail:{
screen: Detail,
navigationOptions:{
title:"详情页"
}
}
})
export default createAppContainer(StackNavigation)