React Navigation航器之createStackNavigator实现页面间普通跳转、切换

createStackNavigator语法

• createStackNavigator(RouteConfigs,StackNavigatorConfig)

参数说明

RouteConfigs

• RouteConfigs —— 路由名称到路由配置的一个映射
  示例

{
	Home:{ //这是一个首页路由配置项
		screen:Home,//必填项   Home是react的一个组件
		path:'',//选填项深度连接或webAPP中起作用
		navigationOptions:{//选填项
			//配置项...
		}
	}
	Detail:{ //这是一个详情页路由配置项
		screen:Detail,//必填项   Detail是react的一个组件
		path:'',//选填项深度连接或webAPP中起作用
		navigationOptions:{//选填项
			//配置项...
		}
	}
}

navigationOptions配置项参数说明

1. title：StackNavigator中表示头部标题，TabNavigator中表示tab文字，DrawerNavigator

StackNavigatorConfig

1. initialRouteName 可选字符串类型：设置首页，它的值应该是routeConfig中的一个key值如：“Home”
2. initialRouteParams 可选对象类型：首页的默认参数
3. initialRouteKey 初始页面的可选标识符
4. defaultNavigationOptions 可选对象类型：用于设置页面header的公共样式
5. mode 定义页面打开和关闭时的风格：card：默认值；modal从底部滑入，仅iOS起作用
6. headerMode 设置header渲染时的风格：float：一直渲染一个header，当页面切换时有一个动画效果（iOS的默认效果）；screen：每个页面渲染一个header，当页面切换时跟随页面一块切换（Android默认效果）；none：不渲染页面header
7. headerBackTitleVisible 打开新的页面后只能的判断是否显示回退按钮旁边的文字，也可以使用true或false来强制设置
8. headerLayoutPreset 定义页面头title文字的位置：left：title居左；center：title居中
9. cardStyle：定义页面的样式（背景色等）
10. cardShadowEnabled：Boolean 默认true
11. cardOverlayEnabled：Boolean 默认false
12. onTransitionStart：Function 页面动画开始时调用
13. 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)