1 属性:
barTintColor : 导航条的背景颜色
initalRoute : 在RN 中导航名为“路由”(学过网络的应该明白这个词的意思), 作用就是指路的,大家可以这么理解,这个属性是一个方法,用来初始化导航的。
itemWrapperStyle : 为每一项定制样式,例如设置每一个页面的背景颜色
navigationBarHidden : 为true , 隐藏导航栏。
shadowHidden : 是否隐藏阴影,true/false。
tintColor : 导航栏上按钮的颜色设置。
titleTextColor : 导航栏上字体的颜色 。
translucent : 导航栏是否是半透明的,true/false。
push(route) : 加载一个新的界面(视图或者路由)并且路由到该界面。
pop() : 返回到上一个页面。
popN(n) : 一次性返回N个界面,当n = 1 时,即相当于pop()方法的效果。
replace(route):替换当前的路由。
replacePrevious(route) : 替换前一个页面的视图并且回退过去。
resetTo(route) : 取代最顶层的路由并且回退过去。
popToTop() : 回到最上层视图。
带动画导航组件
<NavigatorIOS
initialRoute={{
title:"首页",//标题
component:Home, // 要跳转的板块
}}
shadowHidden={true} // 隐藏导航栏下面的阴影
interactivePopGestureEnabled={true} // 决定是否启用滑动返回手势
style={styles.container}
configureScene={(route) => { // 跳转动画
return Navigator.SceneConfigs.FloatFromBottom;
}}
renderScene={(route, navigator) => { // 将板块生成具体的组件
let Component = route.component; // 获取路由内的板块
return <Component {...route.params} navigator={navigator} /> // 根据板块生成具体组件
}}
/>
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
NavigatorIOS,
TouchableOpacity,
} from 'react-native';
const FirstView = require('./MainBLL/FirstView');
export class NaviOS extends Component {
render() {
return (
<NavigatorIOS
ref='nav'
style={{flex:1}}
initialRoute={{
component:FirstView,
title:'首页',
rightButtonTitle:'下一页',
leftButtonTitle:'左边', // 实例化左边按钮
onLeftButtonPress:() => {alert('左边')}, // 左边按钮点击事件
rightButtonTitle:'右边', // 实例化右边按钮
onRightButtonPress:() => {alert('右边')},// 右边按钮点击事件
passProps: {},
}}></NavigatorIOS>
);
}
}
AppRegistry.registerComponent('NaviOS', () => NaviOS);
/**
* Created by long on 2017/8/10.
*/
import React,{Component} from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
} from 'react-native';
const SecondView = require('./SecondView');
class FirstView extends Component{
render(){
return(
<View style={styles.container}>
<TouchableOpacity onPress = {() => {this.props.navigator.push({
component:SecondView,
title:'第二页',
passProps:{
showText:'传值',
}
})}}>
<Text>点我</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
backgroundColor:'yellow',
flex:1,
justifyContent:'center',
alignItems:'center'
},
});
module.exports = FirstView;
/**
* Created by long on 2017/8/10.
*/
/**
* Created by long on 2017/8/10.
*/
import React,{Component} from 'react';
import {
View,
Text,
TouchableOpacity,
StyleSheet,
} from 'react-native';
class SecondView extends Component{
render(){
return(
<View style = {styles.container}>
<TouchableOpacity onPress={()=>{this.props.navigator.pop()}}>
<Text>{this.props.showText}</Text>
</TouchableOpacity>
</View>
);
}}
const styles = StyleSheet.create({
container: {
backgroundColor:'green',
flex:1,
justifyContent:'center',
alignItems:'center'
},
});
module.exports = SecondView;
效果图:
hah.gif
网友评论