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)

這樣子大概是一個正常的導航欄頁面跳轉