React Native教程之Navigator的使用

花了兩天時間搞出了navigator push到 tabbarios的頁面，給本身作個小小的筆記。

首先在 index.ios.js 頁面中定義app的根視圖

 

mport React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  Navigator,
  View
} from 'react-native';
import first from './first';
export default class Test extends Component {
  render() {
    let firstViewName ='first';//首頁的名字定義
    let firstComponent= first; //首頁的js

    return (
      <Navigator style={{flex:1}}
          initialRoute = {{ name: firstViewName, component: firstComponent }}
            //initialRoute={{ name: defaultName, component: defaultComponent }}
            // 這個指定了默認的頁面，也就是啓動app以後會看到界面的第一屏。須要填寫兩個參數: name 跟 component。
          configureScene = {(route) => {
            return Navigator.SceneConfigs.PushFromRight ;//設置push的動畫效果
          }}
          renderScene = {(route, navigator) => { //route裏其實就是上面initialRout的對象包含了name,component的值。
           //navigator是一個Navigator的對象
            let Component = route.component;
            return <Component {...route.params} navigator = {navigator} />
          }} />
           //被render出來給用戶看到的component，而後navigator做爲props傳遞給了這個component。
          
    );
  }
}

 

接下來咱們定義first.js的界面

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

import second from './second'; //導入要被push的第二個頁面的js
 
 export default class first extends Component {

   constructor(props){
     super(props);
     this.state= {

     };

   }
 render() {

     return (
       <View style={styles.container}>
        
           {/*按鈕*/}
          <TouchableOpacity style={mainStyle.nextButton} onPress={this.onPushButton.bind(this)}>
            <Text style={mainStyle.buttonText}>下一頁面</Text>
          </TouchableOpacity>
       </View>
     );
   }

//點擊push事件
onPushButton(){
     
   const {navigator} = this.props;
        if(navigator){
          navigator.push({
            name:'second',//下一個頁面的名稱
            component:second,//下個頁面的js
            params:{
              keyName:'keyValue' //能夠傳任意值
            }
          })
        }
}


pop返回事件
在second.js的按鈕點擊事件中
onPopButton(){
    const {navigator} =this.props;
    if(navigator){
      navigator.pop();
    }
  }

注意：push到第二個界面，若是感受動畫有延遲，是由於第二個頁面沒有子view或者父view沒有設置背景顏色。設置背景顏色就能夠了。