前言

此文完全參考React-Native中文社區的博客新手理解navigator的教程而來,建議直接跳轉鏈接進行詳細學習,為防止鏈接失效或不可抗力因素無法訪問,個人整理簡單記錄如下.

開始

由于前一篇文章將代碼進行了分層整理,所以我們的index.android.js已經變得相對簡潔

index.android.js

'use strict';

import React,{Navigator,AppRegistry} from 'react-native';

{/**引入Login組件 */}
import Login from './src/login/Login.js';

class TaraRn extends React.Component {
    
  render() {
    {/** 默認組件名稱以及默認組件 */}
    let defaultName = "Login";
    let defaultComponent = Login;
    
    return (
     <Navigator          
          //初始化組件
          initialRoute={{ name: defaultName, component: defaultComponent }}    
          //頁面切換效果 
          configureScene={(route) => {
            return Navigator.SceneConfigs.VerticalDownSwipeJump;
          }}
          renderScene={(route, navigator) => {
            let Component = route.component;
            return <Component {...route.params} navigator={navigator} />
          }} />
    )
  }
}
  
AppRegistry.registerComponent('TaraRn', () => TaraRn);

這里來解釋一下代碼:

第三行: 一個初始首頁的component名字，比如我寫了一個component叫HomeComponent，那么這個name就是這個組件的名字【HomeComponent】了。

第四行: 這個組件的Class，用來一會兒實例化成 <Component />標簽

第七行:initialRoute={{ name: defaultName, component: defaultComponent }} 這個指定了默認的頁面，也就是啟動app之后會看到界面的第一屏。 需要填寫兩個參數: name 跟 component。

第八，九，十行: configureScene={() => { return Navigator.SceneConfigs.VerticalDownSwipeJump;
}} 這個是頁面之間跳轉時候的動畫，具體有哪些？

• Navigator.SceneConfigs.PushFromRight (默認)
• Navigator.SceneConfigs.FloatFromRight
• Navigator.SceneConfigs.FloatFromLeft
• Navigator.SceneConfigs.FloatFromBottom
• Navigator.SceneConfigs.FloatFromBottomAndroid
• Navigator.SceneConfigs.FadeAndroid
• Navigator.SceneConfigs.HorizontalSwipeJump
• Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
• Navigator.SceneConfigs.VerticalUpSwipeJump
• Navigator.SceneConfigs.VerticalDownSwipeJump

最后的幾行:

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

這里是每個人最疑惑的，我們先看到回調里的兩個參數:route, navigator。通過打印我們發現route里其實就是我們傳遞的name,component這兩個貨，navigator是一個Navigator的對象，為什么呢，因為它有push pop jump...等方法，這是我們等下用來跳轉頁面用的那個navigator對象。
return <Component {...route.params} navigator={navigator} />
這里有一個判斷，也就是如果傳遞進來的component存在，那我們就是返回一個這個component，結合前面 initialRoute 的參數，我們就是知道，這是一個會被render出來給用戶看到的component，然后navigator作為props傳遞給了這個component。

• getCurrentRoutes() - 獲取當前棧里的路由，也就是push進來，沒有pop掉的那些。
• jumpBack() - 跳回之前的路由，當然前提是保留現在的，還可以再跳回來，會給你保留原樣。
• jumpForward() - 上一個方法不是調到之前的路由了么，用這個跳回來就好了。
• jumpTo(route) - 跳轉到已有的場景并且不卸載。
• push(route) - 跳轉到新的場景，并且將場景入棧，你可以稍后跳轉過去
• pop() - 跳轉回去并且卸載掉當前場景
• replace(route) - 用一個新的路由替換掉當前場景
• replaceAtIndex(route, index) - 替換掉指定序列的路由場景
• replacePrevious(route) - 替換掉之前的場景
• immediatelyResetRouteStack(routeStack) - 用新的路由數組來重置路由棧
• popToRoute(route) - pop到路由指定的場景，其他的場景將會卸載。
• popToTop() - pop到棧中的第一個場景，卸載掉所有的其他場景。

Login.js

'use strict';

{/**引入樣式文件 */}
import styles from './Login.style.js';
{/**引入圖標字體 */}
import Icon from 'react-native-vector-icons/FontAwesome';
{/**引入Homepage */}
import Home from '../home/Home.js';

import React, {
  Component, 
  TouchableHighlight,
  Text,
} from 'react-native';

export default class Login extends Component {
  
  constructor(props){
    super(props);
    this.state = {
      name : null
    }    
  }
  
  _onLogin(){   
    // 進行跳轉并傳遞參數
    this.props.navigator.push({
      title : 'homepage',
      component:Home,
      params : {
        name : 'Tom'
      }
    })
  }
  
  
  render() {
    return (
      <View style={styles.container}>        
        <TouchableHighlight
            style={styles.th}
            underlayColor="rgb(210, 230, 255)"
            onPress = {this._onLogin.bind(this)}>
            <View>
              <Text>登錄</Text>
            </View>
        </TouchableHighlight>      
      </View>
    );
  }

Home.js

'use strict'

import React,{
    Component,
    TouchableOpacity,
    View,
    Text
} from 'react-native'

import styles from './Home.style.js';

export default class Home extends Component{
  constructor(props){
      super(props);
      this.state = {
          name : 'Frank'
      };
  }
  /**接收傳遞過來的參數 */
  componentDidMount(){
      this.setState({
          name : this.props.name
      })
  }
  /**返回事件 */
  _onBack(){
    const { navigator } = this.props;
    if(navigator) {
       navigator.pop();
    }
  }
  
  render(){
        return (
            <View style={styles.container}>
                <Text>Hello.{this.state.name}</Text>
                <TouchableOpacity style={styles.th} onPress={this._onBack.bind(this)}>
                    <Text>點我返回</Text>                    
                </TouchableOpacity> 
            </View>
        )
    }
}