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)
这样子大概是一个正常的导航栏页面跳转