因为最近在学习react native的导航栏的时候，发现Facebook推荐使用新的导航器

所以抽出点时间学习下新的导航器

第一步：将react-navigation导入到项目中

npm install --save react-navigation

第二步：开始使用

首先我们来建立第一个界面

import React, {Component} from 'react';import {    AppRegistry,    Text,    View,    Button} from 'react-native';//导入stack导航组件import { StackNavigator } from 'react-navigation';import ChatScreen from './ChatScreen'class HomeScreen extends Component{    static navigationOptions = {        title: '首页',//标题    };    render() {        const {navigate} = this.props.navigation;        return (            
                    
     
      Hello, world!
                     
      navigate('Chat',{user:'kipeng'})}//传递参数                    title="Chat with Lucy"                />                    );    }}//进行导航的注册const SimpleApp = StackNavigator({    Home: { screen: HomeScreen },    Chat: { screen: ChatScreen },});//注册AppRegistry.registerComponent('storage', () => SimpleApp);
    

用于跳转的第二个界面

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View,    Image} from 'react-native';export default class ChatScreen extends Component {    static navigationOptions = {        title: '第二页',    };    render() {        const {params} = this.props.navigation.state;//接收参数        return (            
                    
     
      Chat with {params.user}
                 
            );    }}

第一个界面的的这个需要注意下，我们注册是导航器

AppRegistry.registerComponent('storage', () => SimpleApp);

这样一个简单的页面跳转就完成了