对于app而言，一款应用往往涉及到很多的页面，而页面之间的跳转Android和iOS实现也各不相同。在iOS上，系统为我们提供了UINavigationController控件用来专门控制页面的跳转，iOS的实现思路很清晰，为按钮添加action事件，点击之后跳转到指定的页面即可。例如：

//定义一个Button，点击后跳转到另一个页面
    UIButton * button=[UIButton buttonWithType:UIButtonTypeSystem];
    button.frame=CGRectMake(130, 220, 100, 30);
    [button addTarget:self action:@selector(toNext)      forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"跳转登录" forState:UIControlStateNormal];
[self.view addSubview:button];
//省略…
-(void)toNext{
    UIBarButtonItem * back=[[UIBarButtonItem alloc]init];
    back.title = @"返回";
    self.navigationItem.backBarButtonItem = back;

    SecondViewController * second = [[SecondViewController alloc]init];
    [self.navigationController pushViewController:second animated:YES];
}

对于Android来说，Android的跳转通过Intent来进行跳转，而返回等操作，Android一般为我们实现了物理返回和软件返回两种。物理返回我们一般通过捕捉onKeyDown用户事件，而软件返回主要通过在界面上添加返回按钮实现页面的返回操作。

Navigator 与 NavigatorIOS

在移动开发过程中，几乎所有的APP中或多或少都会涉及到多个界面间的切换，在React Native中有两个组件负责实现这样的效果 —— Navigator 和 NavigatorIOS。Navigator可以在iOS和Android同时使用，而NavigatorIOS则是包装了UIKit库的导航功能，使用户可以使用左划功能来返回到上一界面。

Navigator 属性

Navigator常见的属性如下：

Navigator使用

1，首先，创建2个组件（home、Temp）并初始化组件

代码如下：
home组件

import React, { Component } from ‘react‘;
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View
  } from ‘react-native‘;

  var Home = React.createClass( {
      render() {
          return (
              <View style={styles.container}>
                  <Text>点击跳转</Text>
              </View>
          );
      }
  });

  var styles = StyleSheet.create({
      container: {
          backgroundColor:‘yellow‘,
          flex:1,
          justifyContent:‘center‘,
          alignItems:‘center‘
      },
  });

  module.exports = Home;

temp组件

 import React, { Component } from ‘react‘;
  import {
      AppRegistry,
      StyleSheet,
      Text,
      View
  } from ‘react-native‘;

  var Temp = React.createClass( {
      render() {
          return (
              <View style={styles.container}>
                  <Text>点击返回</Text>
              </View>
          );
      }
  });

  var styles = StyleSheet.create({
      container: {
          backgroundColor:‘yellow‘,
          flex:1,
          justifyContent:‘center‘,
          alignItems:‘center‘
      },
  });

  module.exports = Temp;

实例化 Navigator的属性：initialRoute 和 renderSence，它们的作用分别是告诉导航器需要渲染的场景、根据路由描述渲染出来。

      <Navigator
          style={{flex: 1}}        // 布局
          initialRoute={{
              name:‘Home‘,    // 名称
              component:Home  // 要跳转的板块
          }}

          renderScene={(route, navigator) => {    // 将板块生成具体的组件
                  let Component = route.component;    // 获取路由内的板块
                  return <Component {...route.params} navigator={navigator} />    // 根据板块生成具体组件
          }}
      />

项目实例

比如我们要实现两个页面的切换效果，当点击返回的时候可以返回之前的页面，如图所示：


要实现上面的效果，需要三个文件：第一个页面，第二个页面和一个控制跳转的JS。
导航控制页面，

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from ‘react‘;
import Splash from ‘./src/widght/ProductList‘;

import {
  AppRegistry,
  StyleSheet,
  Platform,
  TouchableOpacity,
  Text,
  StatusBar,
  Navigator,
  ListView,
  Image,
  View
} from ‘react-native‘;

const defaultRoute = {
    component: Splash
};

export default class Demo extends Component {
  renderScene(route, navigator) {
        let Component = route.component;
        return (
            <Component {...route.params} navigator={navigator}/>
        );
    }

    renderNavBar() {
        var routeMapper = {
            LeftButton(route, navigator, index, navState) {//左边按钮
                if (index > 0) {
                    return (
                        <TouchableOpacity
                            onPress={() => navigator.pop()}//退栈
                            style={styles.button}>
                            <Image
                                style={styles.thumbnail}
                                source={require(‘./image/back_gray_icon.png‘)}
                            />
                        </TouchableOpacity>
                    );
                }
            },
            RightButton(route, navigator, index, navState) {//右边按钮

            },
            Title(route, navigator, index, navState) {//主标题
                return (
                    <View style={styles.title}>
                        <Text style={styles.buttonText}>{!route.title ? ‘商品列表‘ : ‘商品详情‘}</Text>
                    </View>
                );
            }
        };

        return (
            <Navigator.NavigationBar
                style={styles.navigationBarStyle}
                routeMapper={routeMapper}
            />
        );
    }

    render() {
        return (
            <Navigator
                initialRoute={defaultRoute}
                renderScene={this.renderScene}
                sceneStyle={{paddingTop: (Platform.OS === ‘android‘ ? 66 : 74)}}
                navigationBar={this.renderNavBar()}/>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        backgroundColor: ‘#F5FCFF‘,
    },
    navigationBarStyle:{
      alignItems: ‘center‘,
      backgroundColor: ‘#FFFFFF‘,
      shadowOffset: {
          width: 1,
          height: 0.5,
      },
      shadowColor: ‘#999999‘,
      shadowOpacity: 0.2,
    },
    title: {
        flex: 1,
        alignItems: ‘center‘,
        justifyContent: ‘center‘,
        backgroundColor:‘#FFFFFF‘
    },
    button: {
        flex: 1,
        width: 50,
        alignItems: ‘center‘,
        justifyContent: ‘center‘
    },
    buttonText: {
        fontSize: 18,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
        color: ‘#999999‘,
        fontWeight: ‘800‘
    },
    thumbnail: {
         width: 40,
         height: 40
     }
});


AppRegistry.registerComponent(‘Demo‘, () => Demo);

商品列表ProductList.js

/**
 * https://github.com/facebook/react-native
 * @flow
 */


import React, { Component } from ‘react‘;
import { View, Text,Image, StyleSheet,TouchableOpacity} from ‘react-native‘;
import ProductDetail from ‘./ProductDetail‘;


class ProductList extends Component {
  openPage() {
        this.props.navigator.push({
            title: ‘ProductDetail‘,
            component: ProductDetail
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity onPress={this.openPage.bind(this)}>
                    <Text style={styles.textStyle}>点我跳转第二个页面</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
          flex: 1,
          justifyContent: ‘center‘,
          alignItems: ‘center‘,
          backgroundColor: ‘#FFFFFF‘
    },
    textStyle: {
        fontSize: 20,
        color:‘#55ACEE‘,
        marginBottom: 8,
        textAlign: ‘left‘
    }

});

export default ProductList;

商品详情页面，ProductDetail.js

/**
 * https://github.com/facebook/react-native
 * @flow 闪屏页
 */


import React, { Component } from ‘react‘;
import { View, Text,Image, StyleSheet,TextInput,TouchableOpacity} from ‘react-native‘;


class ProductDetail extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.detail}>商品详情页</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#FFFFFF‘,
  },
  detail: {
    fontSize: 24,
    textAlign: ‘center‘,
  }
});

export default ProductDetail;

Navigator内置了很多动画跳转。如：

• Navigator.SceneConfigs.PushFromRight 从右边进入

 (route, routeStack) => Navigator.SceneConfigs.FloatFromRight

• Navigator.SceneConfigs.FloatFromLeft 从左边进入

  (route, routeStack) => Navigator.SceneConfigs.FloatFromLeft

• Navigator.SceneConfigs.FloatFromBottom 从底部进入
• Navigator.SceneConfigs.FloatFromBottomAndroid

  (route, routeStack) => Navigator.SceneConfigs.FloatFromBottom

• Navigator.SceneConfigs.FadeAndroid Android飞入效果

(route, routeStack) => Navigator.SceneConfigs.FadeAndroid

• Navigator.SceneConfigs.HorizontalSwipeJump 水平跳入

 (route, routeStack) => Navigator.SceneConfigs.HorizontalSwipeJump

除此之外，还有很多动画效果，这里不再依依说明。

NavigatorIOS 属性

对于NavigatorIOS而言，主要有以下属性：

NavigatorIOS常用方法

除了上面的属性之外，还有一些常用的方法：
push(route) 导航器跳转到一个新的路由
pop()返回到上一页
replace(route)替换当前页的路由，并立即加载新路由的视图
replacePreviousAndPop(route)替换上一页的路由/视图并且立即切换回上一页
resetTO(route)替换最顶级的路由并且回到它
replaceAtIndex替换指定路由
popToRoute(route)一直回到某个指定的路由

NavigatorIOS实例

和 Navigator 一样 NavigatorIOS 需要有个根视图来完成初始化，所以我们需要先创建一个组件来描述这个界面，并将这个组件通过路由的形式告诉 NavigatorIOS。
1，创建一个 Home 组件，用来作为 NavigatorIOS 的根视图

 var Home = React.createClass( {
      render() {
          return (
              <View style={styles.container}>
                     <Text>点击跳转页面</Text>
              </View>
          );
      }
  });
   var styles = StyleSheet.create({
      container: {
          // 背景颜色
          backgroundColor:‘yellow‘,
          flex:1,
          // 对齐方式
          justifyContent:‘center‘,
          alignItems:‘center‘
      },
  });

然后我们实例化一个 NavigatorIOS 并设置路由。

  var navigatorDemo = React.createClass( {
        render() {
          return (
              <NavigatorIOS
                  initialRoute={{
                      component: Home,    // 要跳转的页面
                      title:‘首页‘    // 跳转页面导航栏标题
                  }}
                  style={{flex:1}}  // 此项不设置,创建的导航控制器只能看见导航条而看不到界面
              />
          );
        }
  });

然后通过TouchableOpacity点击跳转。

左边返回按钮的样式：

initialRoute={{
         component: Home,    // 要跳转的页面
         title:‘首页‘,   // 跳转页面导航栏标题
         leftButtonTitle:‘左边‘,   // 实例化左边按钮
         onLeftButtonPress:() => {alert(‘左边‘)},  // 左边按钮点击事件
         rightButtonTitle:‘右边‘,  // 实例化右边按钮
         onRightButtonPress:() => {alert(‘右边‘)}  // 右边按钮点击事件
          }}

附：示例代码