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)

这样子大概是一个正常的导航栏页面跳转