导航组件 NavigatorIOS

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

参考资料：
http://blog.csdn.net/wxs0124/article/details/50608845