content: 
  import React from 'react';
  import {
      // AppRegistry,
      Text,
      View,
      Button,
  } from 'react-native';
  import { StackNavigator } from 'react-navigation';
  
  /*
          http://blog.csdn.net/lu1024188315/article/details/73550028
  
  * StackNavigatorConfig
  *
  参数:
      initialRouteName: 设置默认的页面组件，必须是上面已注册的页面组件
      initialRouteParams: 初始路由的参数
      navigationOptions: 屏幕导航的默认选项
      paths: RouteConfigs里面路径设置的映射
      mode: 页面切换模式:
      card: 普通app常用的左右切换
      modal: 上下切换
      headerMode: 导航栏的显示模式:
      float: 无透明效果, 默认
      screen: 有渐变透明效果, 如微信QQ的一样
      none: 隐藏导航栏
      cardStyle: 样式
      onTransitionStart: 页面切换开始时的回调函数
      onTransitionEnd: 页面切换结束时的回调函数
  
  * */
  
  // 第二个页面
  class ChatScreen extends React.Component {
  
      static navigationOptions = ({navigation}) => ({
          // 展示数据 "`" 不是单引号
          title: `Chat with ${navigation.state.params.user}`,
  
      });
  
      render() {
  
          // The screen's current route is passed in to `props.navigation.state`: 传过来的对象：{ user: 'Lucy' }
          const { params } = this.props.navigation.state;
  
          console.log("-----------navigation.state----------->"+this.props.navigation.state);
  
          console.log(this.props.navigation);
          //object {state: Object, dispatch: function, goBack: function, navigate: function, setParams: function}
          console.log(this.props.navigation.state);
          //Object {params: Object, key: "id-1498014888408-1", routeName: "Chat"}
          console.log("-----------params----------->");
          console.log(params);
          //打印结果{user: "Lucy"}
          return (
              <View>
                  <Text>Chat with {params.user}</Text>
              </View>
          );
      }
  }
  
  ChatScreen.navigationOptions = ({navigation}) => {
      console.log("---------navigation------------>");
      console.log(navigation);
      //Object {state: Object, dispatch: function, goBack: function, navigate: function, setParams: function}
      return {
          // 展示数据 "`" 不是单引号
          title: `Chat with ${navigation.state.params.user}`,
          // 导航栏的标题, 可以是字符串也可以是个组件 会覆盖 title 的值
          // headerTitle : '返回',
          //右边按钮
          headerRight:(
              <View>
                  <Button
                      title="点我"
                      onPress={() => alert("hello")}
                  />
              </View>
          ),
          //左上角的返回键文字, 默认是上一个页面的title  IOS 有效
          headerBackTitle : "返回",
          //导航栏的style
          headerStyle: {
              backgroundColor: '#fff'
          },
          //导航栏的title的style
          headerTitleStyle: {
              color: 'green',
              //居中显示
              alignSelf : 'center',
          },
          //按压返回按钮显示的颜色 API > 5.0 有效
          headerPressColorAndroid : 'blue',
          //返回按钮的颜色
          headerTintColor : 'red',
          //是否允许右滑返回，在iOS上默认为true，在Android上默认为false
          gesturesEnabled: true,
      };
  
  };
  
  ChatScreen.navigationOptions = ({navigation}) => {
      console.log("---------navigation------------>");
      console.log(navigation);
      //Object {state: Object, dispatch: function, goBack: function, navigate: function, setParams: function}
      return {
          // 展示数据 "`" 不是单引号
          title: `Chat with ${navigation.state.params.user}`,
          // 导航栏的标题, 可以是字符串也可以是个组件 会覆盖 title 的值
          // headerTitle : '返回',
          //右边按钮
          headerRight:(
              <View>
                  <Button
                      title="点我"
                      onPress={() => alert("hello")}
                  />
              </View>
          ),
          //左上角的返回键文字, 默认是上一个页面的title  IOS 有效
          headerBackTitle : "返回",
          //导航栏的style
          headerStyle: {
              backgroundColor: '#fff'
          },
          //导航栏的title的style
          headerTitleStyle: {
              color: 'green',
              //居中显示
              alignSelf : 'center',
          },
          //按压返回按钮显示的颜色 API > 5.0 有效
          headerPressColorAndroid : 'blue',
          //返回按钮的颜色
          headerTintColor : 'red',
          //是否允许右滑返回，在iOS上默认为true，在Android上默认为false
          gesturesEnabled: true,
      };
  
  };
  
  //第一个页面
  class HomeScreen extends React.Component {
      // 配置说明
      static navigationOptions = {
      	//标题
        title: 'FirstScreen',
         //是否允许右滑返回，在iOS上默认为true，在Android上默认为false
        cardStack: {
                gesturesEnabled: true,
        },
  
      };
  
      render() {
          const { navigate } = this.props.navigation;
          // navigate 是什么鬼 就是下面的这块代码 可见 navigate 是个function对象
          // 参数1: 是要跳转的页面名字 例如：Chat
          // 参数2: 要传递的参数
          // 参数3: 一般不用
          // function navigate(routeName, params, action) {
          //    return navigation.dispatch(_NavigationActions2.default.navigate({
          //      routeName: routeName,
          //      params: params,
          //      action: action
          //    }));
          console.log(navigate);
          console.log('水水水水');
          return (
              <View>
                  <Text>Hello, Navigation!</Text>
                  <Text></Text>
                  <Button
                      //点击跳转到界面二，并传递参数 { user: 'Lucy' }
                      onPress={() => navigate('Chat', { user: 'Lucy' })}
                      title="去 ChatScreen界面"
                  />
                  <Text></Text>
              </View>
          );
      }
  }
  
  // // 这样也是可以
  HomeScreen.navigationOptions = {
    	//标题
      title: 'FirstScreen',
       //是否允许右滑返回，在iOS上默认为true，在Android上默认为false
      cardStack: {
              gesturesEnabled: true,
      },
      // headerBackTitle : "返回",
  
   };
  
  
  // MyFirstProject 是你的react native 项目名  注意： 这块代码要放置到HomeScreen，ChatScreen...的下面否则会出错：Home不存在。
  const MyFirstProject = StackNavigator({
      Home: { screen: HomeScreen },
      Chat: { screen: ChatScreen },
      // navigationOptions  // 此处设置了, 会覆盖组件内的`static navigationOptions`设置.
  },{
      initialRouteName: 'Home', // 默认显示界面
      mode:'modal',
      //导航栏相关设置项
      // header:{
      // 	    //导航栏可见
      //         visible : false,
      //         //左上角的返回键文字, 默认是上一个页面的title
      //         backTitle : "返回",
      //         //导航栏的style
      //         headerStyle: {
      //             backgroundColor: '#fff'
      //         },
      //         //导航栏的title的style
      //         titleStyle: {
      //             color: 'green'
      //         }
      // },
      // title : 'home',
      // //导航栏的style
      //  headerStyle: {
      //             backgroundColor: '#fff'
      //  },
      //         //导航栏的title的style
      //  headerTitleStyle: {
      //          color: 'blue',
      //          //居中显示
      //          alignSelf : 'center',
      //      },
  
      // //是否允许右滑返回，在iOS上默认为true，在Android上默认为false
      // cardStack: {
      //         gesturesEnabled: true,
      // },
  
  
      onTransitionStart: ()=>{ console.log('导航栏切换开始'); },  // 回调
      onTransitionEnd: ()=>{ console.log('导航栏切换结束'); },  // 回调
  });
  
  export default MyFirstProject;
  // AppRegistry.registerComponent('MyFirstProject', () => MyFirstProject);