react-native的頁面跳轉

引言 ：react-native出來也有一段時間了，一直只是聽說react-nativa是如何的好,能夠實現跨平臺（android、IOS）.一直沒有去主動交接它。直到最近，公司為了節省後期的維護成本，也同時將現有的專案進行一次升級，然後決定用react-native重新開發一套。
當然了，接觸一門新的技術難免會遇到很多的難點。根據實際開發遇到的問題寫點文章。鞏固自己的同時也許能幫到別人。
我學習的資料網[React Native 中文網](http://reactnative.cn/)
學習前期一些屬性（props）、狀態（state）、樣式（style）、佈局（flexbox）看著敲敲程式碼就能比較好接受了。
難點就是卡在頁面的跳轉了，雖然文件也提供了頁面跳轉的教程，但給我的感覺是一個頁面自己在跳然後修改了一寫屬性值。（這並不能讓我很滿意，於是我就決定自己找資料寫一個自己滿意的）
[參考地址](http://blog.csdn.net/youth_never_go_away/article/details/52572029)

正題開始：先給大家上一組圖（很慚愧，不會上傳視訊）。
 

第一個介面

點選跳轉的圖片

點選跳轉的圖片
注：在android。處於主介面時，支援雙擊返回退出。在其他頁面時，支援點選返回回到上一個介面。
在實現介面跳轉時需要提前瞭解的知識：

1. navigater(導航器)
2. scene(場景)

3. route(路由)

   這三個概念也會在下面的程式碼中介紹到。

程式碼部分

程式的入口：index.ios.js

import React, { Component } from 'react';
import {
    AppRegistry,
} from 'react-native'
 
;
import SimpleComponent from './jsScene/SimpleComponent';

export default class helloRN extends Component {
  render() {
    return (
        //顯示元件
        <SimpleComponent />    
    );
  }
}

AppRegistry.registerComponent('helloRN', () => helloRN);

入口程式碼非常簡單，就是顯示一個SimpleComponent的元件（不過你們要是照著敲時，注意資料夾的關係，這個很重要）
元件SimpleComponent.js

import React, { Component } from 'react';
import { View, Text, Navigator } from 'react-native';
import FirstPageComponent from './FirstPageComponent';

export default class SimpleComponent extends Component {
  render() {
        //元件名字
        let defaultName = 'FirstPageComponent';
        //元件的Class用來例項化成<Component/>標籤的
        let defaultComponent = FirstPageComponent;
        return (
            <Navigator
                //這個指定了預設的頁面，也就是啟動app之後會看到介面的第一屏。 需要填寫兩個引數: name 跟 component。
                //（注意這裡填什麼引數純粹是自定義的，因為這個引數也是你自己發自己收，自己在renderScene方法中處理。
                // 我們這裡示例用了兩個引數，但其實真正使用的引數只有component）

                initialRoute={{ name: defaultName, component: defaultComponent }} //初始化場景

                //頁面跳轉動畫  可以返回多個動畫  使用||返回

                configureScene={(route) => {
                  return Navigator.SceneConfigs.HorizontalSwipeJump;    //設定場景的切換方式
                }}
                //渲染場景  route中就是我們自定義的 name 和 component
                //navigator 就是Navigator物件

                renderScene={(route, navigator) => {
                  let Component = route.component;

                  //Component 是route的component引數值  在路由中初始化的component的引數值是 defaultComponent
                  //所以 Component元件就是FirstPageComponent元件

                  return <Component {...route.params} navigator={navigator} />
                }} />
        );
    }
}

這段程式碼裡面的內容就比較複雜了，我就每個關鍵字逐一解釋，主要的內容是return()中的內容。
< Navigater />個人Navigater是所有元件的一個容器，所有的元件都會在Navigater中進行處理，後面會有程式碼進行很好的解釋。
initialRoute={{ name: defaultName, component: defaultComponent }}，這段程式碼是初始化一個路由，每一個頁面以route為單位在Navigater中活動（顯示或移除）

return Navigator.SceneConfigs.HorizontalSwipeJump; //介面的切換效果

    renderScene={(route, navigator) => {
                  let Component = route.component;

                  //Component 是route的component引數值  在路由中初始化的component的引數值是 defaultComponent
                  //所以 Component元件就是FirstPageComponent元件

                  return <Component {...route.params} navigator={navigator} />
                }}

這是最重要的一段程式碼，渲染一個場景，然後將渲染的場景（FirstPageComponent）返回（顯示出來）。

元件FirstPageComponent.js

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Navigator,
  Text,
  BackAndroid,
  TouchableOpacity
} from 'react-native'

//（MyToast是本人橋接的android的Toast。實際使用的過程可以直接去掉，以免報錯）
import MyToast from './MyToast';

// // 下一句中的ToastAndroid即對應上文
// // public String getName()中返回的字串
// // 練習時請務必選擇另外的名字！
//
// export default NativeModules.ToastAndroid;
import SecondPageComponent from './SecondPageComponent';
import ThirdPageComponent from './ThirdPageComponent';
import FourthPageComponent from './FourthPageComponent';

export default class FirstPageComponent extends Component{
  constructor(props){
    super(props);
    this.state = {};
    this.firstClick = 0;
    this.handleBack = this.handleBack.bind(this);
  }

  //生命週期方法。在組建第一次繪製完成後呼叫，通知組建已經載入完成。
  componentDidMount () {
    BackAndroid.addEventListener('hardwareBackPress', this.handleBack)  //增加手機物理返回鍵的監聽
  }

  //生命週期方法。組建被移除時呼叫此方法
  componentWillUnmount () {
    BackAndroid.removeEventListener('hardwareBackPress', this.handleBack)   //增加手機物理返回鍵的監聽
  }

//雙擊返回鍵退出
handleBack(){
    const { navigator } = this.props;
    if (navigator && navigator.getCurrentRoutes().length > 1) {
      navigator.pop();
      return true;
    }else{
      let timestamp = (new Date()).valueOf();
      if(timestamp - this.firstClick > 2000){
        MyToast.show('在按一次退出',MyToast.SHORT);
        this.firstClick = timestamp;
        return true;
      }else{
        return false;
      }
    }
  }

  //頁面的跳轉
  _pressButton(index){
    const { navigator } = this.props;
    if (navigator){
      switch (index) {
        case 2:
          navigator.push({
            name:'SecondPageComponent',
            component:SecondPageComponent,
          });
          break;
        case 3:
          navigator.push({
            name:'ThirdPageComponent',
            component:ThirdPageComponent,
          });
          break;
        case 4:
          navigator.push({
            name:'FourthPageComponent',
            component:FourthPageComponent,
          });
          break;
        default:
        break;
      }
    }
  }

  render(){
    return(
      <View>
        <TouchableOpacity onPress={this._pressButton.bind(this,2)}
                          style={{ flexDirection:'row', alignItems:'center' }}>
            <Text style={styles.red}>點我跳轉到2
            </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._pressButton.bind(this,3)}
                          style={{ flexDirection:'row', alignItems:'center' }}>
            <Text style={styles.red}>點我跳轉到3
            </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._pressButton.bind(this,4)}
                          style={{ flexDirection:'row', alignItems:'center' }}>
            <Text style={styles.red}>點我跳轉到4
            </Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  red:{
    fontSize:40,
    fontWeight:'300',
    color:'red'
  }
});

還是先從主要的方法說起

return(
      <View>
        <TouchableOpacity onPress={this._pressButton.bind(this,2)}
                          style={{ flexDirection:'row', alignItems:'center' }}>
            <Text style={styles.red}>點我跳轉到2
            </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._pressButton.bind(this,3)}
                          style={{ flexDirection:'row', alignItems:'center' }}>
            <Text style={styles.red}>點我跳轉到3
            </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this._pressButton.bind(this,4)}
                          style={{ flexDirection:'row', alignItems:'center' }}>
            <Text style={styles.red}>點我跳轉到4
            </Text>
        </TouchableOpacity>
      </View>
    )

這只是基本的排列，主要要解釋是的是this._pressButton.bind(this,4)方法。這就是點選事件呼叫_pressButton（index）方法，index是this後面的引數，接下來看方法

_pressButton(index){
    const { navigator } = this.props;
    if (navigator){
      switch (index) {
        case 2:
          navigator.push({
            name:'SecondPageComponent',
            component:SecondPageComponent,
          });
          break;
        case 3:
          navigator.push({
            name:'ThirdPageComponent',
            component:ThirdPageComponent,
          });
          break;
        case 4:
          navigator.push({
            name:'FourthPageComponent',
            component:FourthPageComponent,
          });
          break;
        default:
        break;
      }
    }
  }

在這段程式碼中有一個難以理解的地方就是navigater物件是哪裡來的？
回到simplePageComponent.js中

return < Component {…route.params} navigator={navigator} />

在返回時返回了一個navigator物件的屬性

* const { navigator } = this.props; *
這裡就獲取到了。

navigator.push({
            name:'ThirdPageComponent',
            component:ThirdPageComponent,
          });

這段程式碼就是將ThirdPageComponent元件放入navigator的棧中。達到顯示的目的。
ThirdPageComponent.js方法中就比較簡單了

import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Navigator,
  Image,
  Dimensions,
  Text,
  TouchableOpacity
} from 'react-native'

var deviceWidth = Dimensions.get('window').width;

const BANNER_IMGS = [
    require('../imgs/meinv2.png'),
    require('../imgs/meinv3.png'),
    require('../imgs/meinv4.png'),
    require('../imgs/meinv2.png')
];

export default class ThirdPageComponent extends React.Component {
    constructor(props) {
        super(props);
        this._pressButton = this._pressButton.bind(this);
    }

    _pressButton() {
        //獲取SampleComponent中建立的Navigator物件
        const { navigator } = this.props;
        //為什麼這裡可以取得 props.navigator?請看上文:
        //<Component {...route.params} navigator={navigator} />
        //這裡傳遞了navigator作為props
        //這裡對navigator進行了判斷  如果navigator(導航器)物件存在的情況下 在進行操作
        if (navigator) {
            navigator.pop();
        }
    }

    _renderPage(data, pageID) {
        return (
            <Image
                source={data}
                style={styles.page}/>
        );
    }

    //建立點選區域 當點選的時候 進行 頁面的跳轉 也就是對navigator的引數進行設定  使其跳轉到 第二個介面
    render() {
        return (
            <View >
                <TouchableOpacity onPress={this._pressButton.bind(this)}
                                  style={{flexDirection:'row' ,alignItems: 'center'}}>
                    <Text style={styles.red}>點我跳回去</Text>
                </TouchableOpacity>
                <Text style={styles.red}>我是第三頁面</Text>
            </View>
        );
    }
}
const styles=StyleSheet.create({
    red:{
        fontSize:40,
        fontWeight:'bold',
        color:'red'

    },
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'flex-start',
        paddingTop:5,
        paddingLeft:5,
        backgroundColor:'#999999',
        paddingRight:5,
        paddingBottom:5,
    },
    page: {
        width: deviceWidth,//裝置寬(只是一種實現，此處多餘)
        flex: 1,
        height: 130,
        resizeMode: 'stretch'
    },
});

這個元件中只有一個重要程式碼

navigator.pop();    //返回上一個元件

恩！到此為止，一個react-native的原生的頁面的跳轉就完成，還加入一些返回的細節。（MyToast是橋接的android的Toast。實際使用的過程可以直接去掉，以免報錯）