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)這樣子大概是一個正常的導航欄頁面跳轉