React Native之导航栏

RN用导航栏跳转到页面，首先要在应用中安装此库：

yarn add react-navigation

这样子就能够开始编码了，用例以下：

import React, {Component} from 'react'
import {
    AppRegistry,
    Button,
    View,
    Text,
    TouchableHighlight,
    Image,

} from 'react-native'
import { StackNavigator } from 'react-navigation';//导入导航栏

import  Test from './test' //另外一个JS页面。里面带有原生页面
import nativeView from  './NativeView'//另外一个JS页面
import  scroView from './Scroview'//另外一个JS页面
class  mainScreen extends  Component{  ／／一个页面

    static  navigationOptions ={//导航栏属性可在这里实现
        title:'welcome',
    };

    render(){／／页面内容

        const {navigate}=this.props.navigation;／／这个须要实现，以保在下面的页面跳转的时候调用
        return (

         <View>            <TouchableHighlight                    onPress={()=> navigate('Profile',{name:'jane'})} //页面跳转                    onLongPress={()=> navigate('scroView',{name:'scroView'})}//长按事件 页面跳转            >                <Text>"go to hello"</Text>            </TouchableHighlight>             <Text> </Text>             <Text> </Text>             <Text> </Text>         </View>        );    }}class  ProfileScreen extends  Component{    static  navigationOptions ={//navigationOptions是对导航栏的设置        title:'hello',//导航栏标题        headerBackTitle:' ',//返回的        headerRight:(  //右键            <View>                <Button                title="点我"                onPress ={()=> alert("hello")}                />            </View>        ),        headerStyle:{            backgroundColor:"#ffff00",        },       headerTintColor:"red",//导航栏标题颜色以及返回按钮颜色       mode:"modal",    };    render(){//页面内容        const {navigate}=this.props.navigation;        return(//Image设置图片，必定要设置图片大小，不然不显示            <View>            <Button title="go to Main"                    onPress={()=> navigate('Test',{name:'Main'})}            />            <Text style = {{width : 20 }}></Text>            <Text></Text>            <Button title="go to nativeView"                  onPress={()=> navigate('nativeView',{name:'Main'})}//页面跳转                  />                <Image  source={{uri:'pac'}} style={{width:80,height:100,alignItems:'center',justifyContent:'center'}}/>                <Image  source={{uri:'https://facebook.github.io/react/img/logo_og.png',cache:'only-if-cached'}} style={{width:80,height:100}}                />            </View>        );    }}const Appww11 = StackNavigator(    {        Main:{screen:mainScreen},        Profile:{screen:ProfileScreen},        Test:{screen:Test}, //另外一个js页面        nativeView:{screen:nativeView},//另外一个JS页面        scroView:{screen:scroView}    },{       // initialRouteName:'nativeView',//默认首页,若没有initialRouteName声明，则前面的页面排在第一个的就是首页        onTransitionStart:()=>{            console.log("导航栏切换开始");        },        onTransitionEnd:()=>{            console.log("导航栏结束");        },       // mode:"card",//car:左右 modal:上下    });AppRegistry.registerComponent('NativeDemo', () => Appww11)这样子大概是一个正常的导航栏页面跳转