createStackNavigator({
      //为了每个你要导航到的页面（组件）创建一个入口，定义了一个名为Profile入口，如下：
      Profile: {
        // `ProfileScreen` is a React component that will be the main content of     the screen.
        //`ProfileScreen`是一个React组件，它将成为屏幕的显示的主要内容
        screen: ProfileScreen,
        //当`ProfileScreen`通过StackNavigator被加载时，它将被给予一个`navigation`属性
        // 可选的:在Web应用程序中深度链接或使用react-navigation时，将使用以下路径：
        path: 'people/:name',
        // 动作和路由参数从路径中提取。

        // 可选的: 为了屏幕修改覆盖`navigationOptions`
        navigationOptions: ({ navigation }) => ({
          title: `${navigation.state.params.name}'s Profile'`,
        }),
      }
    },
    {
        ...MyOtherRoutes,
    }
);

2.2StackNavigatorConfig

可以理解为对导航器的全局配置参数；

为了路由可选的配置参数：

initialRouteName - 设置堆栈的默认屏幕， 必须匹配路径配置中的一个键；
initialRouteParams - 为了初始路由（route）的参数；
initialRouteKey - 初始路由的可选标识符；
defaultNavigationOptions - 为了所有页面默认的导航栏配置；
paths - 在路径配置中(RouteConfigs)设置的路径的覆盖映射；

可选选项(配置以后影响界面显示的效果)：

mode - 定义渲染(rendering)和过渡-页面之间切换(transitions)的样式:有card和modal两个值
    card - 使用标准的iOS和Android屏幕切换效果。该值是默认的；
    modal - 使屏幕从底部滑入，这是一种常见的iOS模式。仅适用于iOS，对Android没有影响。

headerMode - 指定标题栏(header)应该怎么被渲染(rendered):有个float、screen和none三个值
    float - 共用一个header 意思就是有title文字渐变效果。 在IOS中这是一个通用的样式；
    screen - 每个屏幕都有一个标题，标题与屏幕一起淡入淡出。 在Android中这是一个通用的样式；
    none - 没有标题栏被渲染(rendered)；

headerBackTitleVisible-对于后退按钮标题是否应该可见，提供了合理的默认值，但是如果要覆盖它，则可以在此选项中使用true或false。

headerTransitionPreset -指定当headerMode:float时标题栏应如何从一个屏幕转换到另一个屏幕。有fade-in-place和uikit两个值
    fade-in-place - 标题组件交叉淡入淡出而不移动，类似于iOS的Twitter，Instagram和Facebook应用程序。这是默认值。
    uikit - iOS的默认行为的近似值。

headerLayoutPreset - 指定如何布置标题组件。有left和center两个值
    left - 将标题锚定在左侧，靠近后退按钮或其他左侧组件。这是Android上的默认设置。在iOS上使用        时，隐藏标题后退标题。左侧组件中的内容将溢出标题下方，如果您需要调整此内容，则可以使用headerLeftContainerStyle和headerTitleContainerStyle。此外，此对齐与headerTransitionPreset：'uikit'不兼容。
    center - 标题默认显示在中心，IOS中的默认值；

cardStyle - 使用此prop可以覆盖或扩展堆栈中单个卡(card)的默认样式。

cardShadowEnabled - 使用此prop可在过渡期间显示可见阴影。默认为true

cardOverlayEnabled - 使用此prop可在转换期间显示可见的堆栈卡叠加。默认为false。

transitionConfig - 返回与默认屏幕转换合并的对象的函数（请参阅类型定义中的TransitionConfig-https://github.com/react-navigation/react-navigation/blob/master/flow/react-navigation.js）。提供的函数将传递以下参数：
    transitionProps - 过渡prop为新的屏幕。
    prevTransitionProps - 过渡prop为旧的屏幕。
    isModal - Boolean指定屏幕是否为模态的。

onTransitionStart - 方法将在页面切换动画即将开始的时候调用；

onTransitionEnd - 方法将在页面切换动画即将结束的时候调用；

transparentCard - Experimental - 支持将堆栈中的所有卡片保持可见并添加透明背景而不是白色背景。这对于实现模式对话框很有用，其中前一个场景仍应在当前场景下可见。

3.StackNavigator使用示例

a.在RN工程中找到package.json文件，在dependencies标签下添加react-navigation库，我使用的WebStorm添加时会自动库的版本

"dependencies": {
"react": "16.6.0-alpha.8af6728",
"react-native": "0.57.4",
"react-native-modal": "^6.5.0",
"react-navigation": "2.18.3"
}

WebStorm右下角会自动提示run npm...点击会自动安装react-navigation库;

b.若使用的其他开发功能需要进入RN工程的目录执行如下命令，使用npm安装react-navigation库，--save表示将该组件写入到package.json文件中。

npm install react-navigation --save

当然，也可以采用yarn工具将该库添加到项目中

 yarn add react-navigation

import {StackNavigator} from 'react-navigation'

3.3创建StackNavigator组件

/**
 * 初始化StackNavigator
 */
const SimpleApp = StackNavigator(
    {
        NavOnePage:{
            screen: NavOne,
            navigationOptions:{
                headerTitle:"首页" //页面标题
            }
        },
        NavTwoPage:{
            screen: NavTwo,
            navigationOptions:{
                header:null//去掉标题栏
            }
        }
    },
    {
        initialRouteName: 'NavTwoPage', //默认路由，就是第一个要显示的页面
    }
);

3.4调用StackNavigator显示

export default class StackNavigatorL extends Component{
    constructor(props){
        super(props);
    }

    render(){
        return (<SimpleApp/>);
    }
}

3.5效果图

4.StackNavigator页面跳转及参数传递

4.1页面跳转

4.1.1导航跳转介绍

每个屏幕组件都会自动提供navigation属性。navigation将包含各种路由方法。如下方法：

在屏幕组件中可以通过this.props.navigation获取到navigation属性；

navigate - 跳转到指定页面，通过创建StackNavigator时指定的屏幕映射key找到对应的页面；

goBack - 关闭当前页面并返回堆栈中的上一个页面；

addListener - 监听navigation生命周期地更新；

isFocused - 返回当前页面是否有焦点，true表示有焦点，false没有；

state - 当前的state/routes

setParams - 设置路由参数

getParam - 通过回调获取指定的参数值

dispatch - 发送一个动作给router

dangerouslyGetParent - 返回父导航器的函数（如果有）

如果导航器是堆栈导航器，则提供了几种navigate和goBack的替代方案，您可以使用任何您喜欢的方式。如下：

push - 将新路由推入堆栈
pop - 回到堆栈
popToTop - 返回到堆栈顶部
replace - 用新路由替换当前页面
reset - 擦除导航器状态并将其替换为多个操作的结果
dismiss - 关闭当前堆栈

4.1.2导航跳转示例

 nextPage = () => {
        //获取navigation的navigate方法
        const {navigate} = this.props.navigation;  
        //跳转到NavTwoPage页面
        navigate('NavTwoPage');
    }

4.2参数传递和接收

导航去另一个页面方法如下：

navigation.navigate({ routeName, params, action, key })
或
navigation.navigate(routeName, params, action)

4.2.1传递参数

const {navigate} = this.props.navigation;  //获取navigation的navigate方法
navigate('NavTwoPage', {awardName:'参数1',needMail:'参数2',awardKey:'参数3'});

navigate(跳转的新页面,参数)，参数时key:value的形式；

4.2.2接收参数

获取参数值

this.props.navigation.state.params.name

this.props.navigation.state.params.(key的名称)

5.StackNavigator配置navigationOptions说明

navigationOptions主要配置标题栏示例如下：

 // 可选的: 为了屏幕修改覆盖`navigationOptions`
        navigationOptions: ({ navigation }) => ({
          title: `${navigation.state.params.name}'s Profile'`,
        }),

header - React元素或一个返回React元素HeaderProps的函数，以显示为标题。设置为null隐藏标题；

headerTitle - 设置标题；

headerBackTitle - 返回按钮标题；

headerRight - 标题右侧的元素设置；

headerLeft - 标题左侧的元素设置；

headerStyle - 标题栏样式；

headerBackTitleStyle - 标题栏返回标题样式

headerLeftContainerStyle - 标题左侧组件样式

headerRightContainerStyle - 标题右侧组件样式

headerTitleContainerStyle - 标题样式

gesturesEnabled - 是否支持手势关闭页面，IOS默认为true，Android默认值为false；

gestureResponseDistance - 设置手势响应的距离；
Object to override the distance of touch start from the edge of the screen to recognize gestures. It takes the following properties:
horizontal - number - Distance for horizontal direction. Defaults to 25.
vertical - number - Distance for vertical direction. Defaults to 135.

gestureDirection - 手势识别的方向；
String to override the direction for dismiss gesture. default for normal behaviour or inverted for right-to-left swipes.

navigationOptions:{
                headerTitle:"第二页",
                headerTitleAllowFontScaling: true,
                headerRight:<Text>headerRight</Text>,
                headerLeft:<Text>headerLeft</Text>,
                headerStyle:{height:80,backgroundColor:'#ff0000'},
                headerTitleStyle:{color:'#ffff00'},
                headerLeftContainerStyle:{backgroundColor:'#0000ff'},
                headerBackgroundTransitionPreset:'toggle',
                gestureDirection:'inverted',
                params:{product: 'Xbox'}
            }

参考：https://reactnavigation.org/docs/en/stack-navigator.html