前言
除了极少数特殊设计的App，导航都是一个App重要组成的部分。导航栏能够维护一个导航堆栈，能够让用户清楚的知道自己当前所处的页面和返回的页面。
在React Native中，官方推荐使用Navigator,因为这个能够在iOS和安卓中通用,不过在现在（2016年5月18日）,Navigator 性能较差。所以，对iOS应用，往往可以使用NavigatorIOS，你将获得系统的iOS导航栏性能和动画。但是对Android App，只能用Navigator。
文档
目前的文档都可以在这里找到,这里我列出常用的部分。
常用参数
- configureScene，类型是function，可选。通过这个参数可以修改界面在导航时候切换的动画。
(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
initialRoute，类型是对象，表明最初的Route对象。一个Route简单来说就是一个界面，Navigator用Route来区分不同的界面。
navigationBar，类型是node，导航栏
renderScene，类型是function，必须参数，在这个方法里根据Route来渲染不同的Scene。
常用函数
push(route) ，跳转到某一个Route
pop()，推出当前状态
popToTop()，推出到第一个界面
popToRoute(route)，推出到某一个界面
Getting start
创建一个工程，打开终端，到一个想要的路径，然后
react-native init LHWeather --verbose
*Tips:调用上述代码会从网络上下载几十M的数据，所以添加–verbose不会让你等的心烦意乱。 *
然后
react-native run-ios
会启动模拟器,如果启动成功，说明项目创建成功。
我们首先会创建一个这样效果工程
这时候的index.ios.js中代码如下
var React = require('react');
import {
View,
Text,
StyleSheet,
AppRegistry,
TouchableHighlight,
Navigator,
} from 'react-native';
var LHWeather = React.createClass({
render(){
return (
;
case 'detail':
return ();
}
}
});
var MainScreen = React.createClass({
toDetail(){
this.props.navigator.push({id:"detail"});
},
render(){
return (
=>详情页
);
}
});
var DetailScreen = React.createClass({
toMain(){
this.props.navigator.pop();
},
render(){
return (
{'主页<='}
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1,
},
button: {
padding: 15,
},
containView:{
flex: 1,
justifyContent: 'center',
},
detailContainView:{
flex:1,
justifyContent: 'center',
backgroundColor:'green',
},
blackText:{
fontSize:20,
textAlign:'center',
},
});
AppRegistry.registerComponent('LHWeather', () => LHWeather);
简单讲解下关于Navigator的部分
;
case 'detail':
return ();
}
}
- 上述代码中的Route很简单，只是一个含有属性id的Object,然后，通过id来判断需要渲染成哪个Scene。
-
navigator={nav}用来把当前navigator的引用传递给实际要展示的Scene
设置转场动画类型和手势
将上文的Navigator修改成如下
Navigator.SceneConfigs.FloatFromBottom}
/>
这样，转场动画会变成从底部推到顶部。可选的参数如下
Navigator.SceneConfigs.PushFromRight (default)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
添加导航栏
为Navigator继续添加一个导航栏navigationBar
Navigator.SceneConfigs.HorizontalSwipeJump}
navigationBar={
这里提到了另外一个控件Navigator.NavigatorBar,这个内嵌的NavigatorBar控件，一个属性是
- routeMapper
*这个属性的目的是告诉Navigator如何根据每个Sence渲染自己 *
这里的NavigationBarRouteMapper是
var NavigationBarRouteMapper = {
//左边Button
LeftButton: function(route, navigator, index, navState) {
if (route.id === 'main') {
return null;
}
var previousRoute = navState.routeStack[index - 1];
return (
navigator.pop()}
style={styles.navBarLeftButton}>
{previousRoute.title}
);
},
//右边Button
RightButton: function(route, navigator, index, navState) {
if (route.id === 'detail') {
return null;
}
return (
navigator.push({id:'detail',title:'Detail'})}
style={styles.navBarRightButton}>
Next
);
},
//标题
Title: function(route, navigator, index, navState) {
return (
{route.title}
);
},
};
注：LeftButton、RightButton、Title 缺一不可，如果不想显示可以返回nulll
同时，要在StylesSheet中添加用到的Style
navBar: {
backgroundColor: 'white',
},
navBarText: {
fontSize: 16,
marginVertical: 10,
},
navBarTitleText: {
color: '#373E4D',
fontWeight: '500',
marginVertical: 9,
},
navBarLeftButton: {
paddingLeft: 10,
},
navBarRightButton: {
paddingRight: 10,
},
navBarButtonText: {
color: '#5890FF',
},
并且import中添加
TouchableOpacity,
这时候的效果如下
添加返回图片
到这里就很简单了，只需要在LeftButton中换成显示一张图片
修改navBarLeftButton的Style
navBarLeftButton: {
paddingLeft: 10,
paddingTop:6,
},
然后，添加一个Style
backImage:{
width:13,
height:26,
},
修改LeftButton
navigator.pop()}
style={styles.navBarLeftButton}>
传递数据
Navigator传递数据使用Route
例如，在Main Screen中，传递data 给Route
toDetail(){
this.props.navigator.push({id:"detail",title:"Detail",data:"Passed from Main screen"});
},
然后，渲染的时候，传递data给DetailScreen的props
case 'detail':
return ();
然后，获取数据，进行渲染
Text style={styles.blackText}>{this.props.data}
最后
附上完整代码
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
var React = require('react');
import {
View,
Text,
StyleSheet,
AppRegistry,
TouchableHighlight,
Navigator,
TouchableOpacity,
Image,
} from 'react-native';
var NavigationBarRouteMapper = {
LeftButton: function(route, navigator, index, navState) {
if (route.id === 'main') {
return null;
}
var previousRoute = navState.routeStack[index - 1];
return (
navigator.pop()}
style={styles.navBarLeftButton}>
);
},
RightButton: function(route, navigator, index, navState) {
if (route.id === 'detail') {
return null;
}
return (
navigator.push({id:'detail',title:'Detail'})}
style={styles.navBarRightButton}>
Next
);
},
Title: function(route, navigator, index, navState) {
return (
{route.title}
);
},
};
var LHWeather = React.createClass({
render(){
return (
Navigator.SceneConfigs.HorizontalSwipeJump}
navigationBar={
;
case 'detail':
return ();
}
}
});
var MainScreen = React.createClass({
toDetail(){
this.props.navigator.push({id:"detail",title:"Detail",data:"Passed from Main screen"});
},
render(){
return (
=>详情页
);
}
});
var DetailScreen = React.createClass({
toMain(){
this.props.navigator.pop();
},
render(){
return (
{this.props.data}
);
}
});
const styles = StyleSheet.create({
backImage:{
width:13,
height:26,
},
container: {
flex: 1,
},
navBar: {
backgroundColor: 'white',
},
button: {
padding: 15,
},
containView:{
flex: 1,
backgroundColor:'gray',
justifyContent: 'center',
},
detailContainView:{
flex:1,
justifyContent: 'center',
backgroundColor:'green',
},
blackText:{
fontSize:20,
textAlign:'center',
},
navBar: {
backgroundColor: 'white',
},
navBarText: {
fontSize: 16,
marginVertical: 10,
},
navBarTitleText: {
color: '#373E4D',
fontWeight: '500',
marginVertical: 9,
},
navBarLeftButton: {
paddingLeft: 10,
paddingTop:6,
},
navBarRightButton: {
paddingRight: 10,
},
navBarButtonText: {
color: '#5890FF',
},
});
AppRegistry.registerComponent('LHWeather', () => LHWeather);
附navigationBar的另一种写法：
import React, { Component, PropTypes } from 'react';
import {
Image,
View,
Text,
TouchableHighlight,
StyleSheet,
Navigator,
Dimensions,
TouchableOpacity,
} from 'react-native';
export default class MyScene extends Component {
renderScene(route, navigator) {
return (
);
}
renderNavTitle(route, navigator) {
return (
{route.title}
);
}
renderNavLeftButton(route, navigator) {
var title = "";
return (
{}}
style={styles.navBarLeftButton}>
);
}
renderNavRightButton(route, navigator) {
var title = "";
return (
{title}
);
}
render() {
var bar = (
参考：
http://blog.csdn.net/Hello_Hwc/article/details/51444540