RN 栈式导航StackNavigator

引入

import {StackNavigator} from 'react-navigation';

配置栈式导航路由：StackNavigator（RouteConfigs,StackNavigatorConfig)
运用如下例代码。

// 注册导航
const Navs = StackNavigator({
    Home: { screen: Tabs },
    HomeTwo: {
        screen: HomeTwo,  // 必须, 其他都是非必须
        path:'app/homeTwo', 使用url导航时用到, 如 web app 和 Deep Linking
        navigationOptions: {}  // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. 具体参数详见下文
    },
    HomeThree: { screen: HomeThree },
    HomeFour: { screen: HomeFour }
}, {
    initialRouteName: 'Home', // 默认显示界面
    navigationOptions: {  // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)
     headerTitle: "首页",//导航栏标题
     headerBackTitle: null,//设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
     headerTintColor: "#333",//设置导航栏颜色
        cardStack: {
            gesturesEnabled: true//是否允许右滑返回，在iOS上默认为true，在Android上默认为false
        }
    }, 
    mode: 'card',  // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
    headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
    onTransitionStart: ()=>{ console.log('导航栏切换开始'); },  // 页面切换开始时的回调函数
    onTransitionEnd: ()=>{ console.log('导航栏切换结束'); }  // 页面切换结束时的回调函数
});

一、StackNavigator属性介绍

    title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用
    header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
    headerTitle：设置导航栏标题，推荐
    headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
    headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"
    headerRight：设置导航条右侧。可以是按钮或者其他视图控件
    headerLeft：设置导航条左侧。可以是按钮或者其他视图控件
    headerStyle：设置导航条的样式。背景色，宽高等
    headerTitleStyle：设置导航栏文字样式
    headerBackTitleStyle：设置导航栏‘返回’文字样式
    headerTintColor：设置导航栏颜色
    headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
    gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭
    mode：定义跳转风格，页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
    headerMode：headerMode取值为float、screen、none三者之一。float代表导航栏始终位于屏幕顶部（iOS 风格），screen代表导航栏随着屏幕的上下滑动而消失（安卓风格），none表示导航栏将不会呈现。
    cardStyle：自定义设置跳转效果
    transitionConfig： 自定义设置滑动返回的配置
    onTransitionStart：当转换动画即将开始时被调用的功能
    onTransitionEnd：当转换动画完成，将被调用的功能
    initialRouteName：设置默认的页面组件，必须是上面已注册的页面组件

如果在StackNavigatorConfig里面配置了navigationOptions的一下参数，这些参数会作用与RouteConfigs里面的所有路由的子页面，如果路由子页面里面设置了static navigationOptions那么会覆盖此处配置的全局参数

RouteConfigs

配置路由页面

每个路由页面具有一个navigation属性（this.props.navigation）

当每一个组件通过StackNavigator接口加载时，它会自动得到一个名为navigation的属性。该属性为一个对象，对象的成员函数可以让开发者操作路由。

navigation属性具有下列属性和方法

1.navigate：用于页面间跳转
2.state:当前页面路由的状态。包含携带的参数params， key ，路由名称 routeName

{ 
  params: { param: 'i am the param' },
  key: 'id-1500546317301-1',
  routeName: 'Mine' 
}

因此跳转代码及参数获取如下

1）.路由跳转（传参）
this.props.navigation.navigate('AnimateDemo',{
      content:'动画demo页'
    });
 
 2）.获取传递的参数
  const {params}=this.props.navigation.state;   
  =>params={  content:'动画demo页'}

3）.路由跳转
this.props.navigation.navigate('AnimateDemo2');

3.setParams：更改当前页面路由的参数，比如可以用来更新头部的按钮或者标题。

componentDidMount() {
    this.props.navigation.setParams({param:'i am the new param'})
}

4.goBack
回退，可以不传，也可以传参数，还可以传 null 。

this.props.navigation.goBack();       // 回退到上一个页面
this.props.navigation.goBack(null);   // 回退到任意一个页面
this.props.navigation.goBack('Home'); // 回退到Home页面