ReactNative官网例子练习（四）——页面跳转

开发一个应用，基本会有很多个页面，就像我们开发Android原生应用的时候，多个Activity 多个Fragment之间跳转 ，Rn中是怎么跳转的呢？答案就是通过导航器Navigator。
例子代码：

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  AppRegistry,  StyleSheet,  Text,  View,  TouchableHighlight,  Image,  Navigator} from 'react-native';class RnWidget extends Component {  render() {      let defaultName = 'firstPageName';      let defaultComponent = FirstPageComponent;    return (      <Navigator      styles = {styles.container}      initialRoute = {{name: defaultName,component : defaultComponent}}      configureScene = {        (route)=>{          return Navigator.SceneConfigs.FloatFromRight        }      }      renderScene = {(route,navigator)=>{          let Component = route.component;          return <Component{...route.params} navigator={navigator}/>      }}      />    )  }}//第一个界面class FirstPageComponent extends Component{  clickJump(){    //因为Navigator <Component {...route.params} navigator={navigator} />传入了navigator 所以这里能取到navigator    const{navigator} = this.props;    if(navigator){      navigator.push({        name : "SecondPageComponent",        component : SecondPageComponent      })    }  }render(){  return(    <View style={styles.container}>    <Text>我是第一个界面</Text>    <TouchableHighlight       underlayColor="rgb(181, 136, 254)"       activeOpacity={0.5}         style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}       onPress={this.clickJump.bind(this)}    >    <Text>点击进入第二个界面</Text>    </TouchableHighlight>    </View>  )}}//第二个界面class SecondPageComponent extends Component{ clickJump(){    const{navigator} = this.props;    if(navigator){      //把当前页面pop掉 回到上一个页面      navigator.pop();    }  }  render(){    return(       <View style={styles.container}>    <Text>我是第二个界面</Text>    <TouchableHighlight       underlayColor="rgb(181, 136, 254)"       activeOpacity={0.5}         style={{ borderRadius: 8,padding: 8,marginTop:5,backgroundColor:"#0588fe"}}       onPress={this.clickJump.bind(this)}    >    <Text>点击返回第一个界面</Text>    </TouchableHighlight>    </View>    )  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#ffffff',  },});AppRegistry.registerComponent('RnWidget', () => RnWidget);

首先要有一个程序的主入口：
class RnWidget extends Component
然后我们要有两个界面 第一个界面和第二个界面
class FirstPageComponent extends Component
class SecondPageComponent extends Component

（1）在程序的主入口里面初始化我们的导航器Navigator

initialRoute={{ name: defaultName, component: defaultComponent }}

这个指定了默认的页面，也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。（注意这里填什么参数纯粹是自定义的，因为这个参数也是你自己发自己收，自己在renderScene方法中处理。我们这里示例用了两个参数，但其实真正使用的参数只有component）

configureScene={() => {return Navigator.SceneConfigs.VerticalDownSwipeJump;

}} 这个是页面之间跳转时候的动画，具体有哪些？可查看下文档或者有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

renderScene={(route, navigator) => {let Component = route.component;return <Component {...route.params} navigator={navigator} />}} />);

这里是每个人最疑惑的，我们先看到回调里的两个参数:route, navigator。通过打印我们发现route里其实就是我们传递的name,component这两个货，navigator是一个Navigator的对象，为什么呢，因为它有push pop jump…等方法，这是我们等下用来跳转页面用的那个navigator对象。
（2） 在第一个界面和第二个界面里面分别有一个push的方法和pop的方法。
navigator.push 传入name和你想要跳的组件页面
navigator.pop(); 把当前页面pop掉

效果：