混合開發的大趨勢之一React Native之頁面跳轉

轉載請注明出處：王亟亟的大牛之路

最近事情有點多，沒有長時間地連貫學習，文章也停了一個多禮拜，愧疚，有時間還是繼續學習，繼續寫！

還是先安利：https://github.com/ddwhan0123/Useful-Open-Source-Android （最近還是保持日更，除非忙的起飛活着出去玩不然都是更的，不信你看）

廢話不多，貼下運作效果

登陸前

登入成功後

部分代碼借鑒：https://github.com/SpikeKing/WclNavigator

rn的頁面跳轉都是交由Navigator來處理，我們看下文檔了解這個常用的元件Navigator

Navigator 實質上是調用的Native的任務棧通過一系列路由做推送跳轉等邏輯的，是以調的還是源生内容。

他有非常多實用的回調函數，注入renderScene configureScene 等等等

Navigator正常運作需要以下幾個步驟

1.初始化路由 —>initialRoute

2.配置跳轉動畫 —>configureScene

3.渲染場景 —>renderScene

代碼是最好的注解，我們直接邊看代碼邊解釋，先是index.android.js

為了讓邏輯更清晰我們把之前登入的代碼 放到了login.android.js

index頁面專心做”配置”

import React,{Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableOpacity
} from 'react-native';
import Button from 'react-native-button'
import Login from './pages/login.android';

export default class WjjPro extends Component {
  /**
   * 使用動态頁面加載
   * @param route 路由
   * @param navigator 導航器
   * @returns {XML} 頁面
   */
  renderScene(route, navigator) {
    return <route.component navigator={navigator}  {...route.passProps} />;
  }

  /**
   * 配置場景動畫
   * @param route 路由
   * @param routeStack 路由棧
   * @returns {*} 動畫
   */
  configureScene(route, routeStack) {
    if (route.type == 'Bottom') {
      return Navigator.SceneConfigs.FloatFromBottom; // 底部彈出
    }
    return Navigator.SceneConfigs.PushFromRight; // 右側彈出
  }

  render() {
    return (
      <Navigator
        style={{flex:}}
        initialRoute={{component: Login}}
        configureScene={this.configureScene}
        renderScene={this.renderScene}/>
    );
  }
}

const styles = StyleSheet.create({
});

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

因為我們首頁實質上不做展示而是直接跳轉到login頁面，是以我們先配置Navigator，初始化各個函數，然後推給Login這個我們在開始就定義的”元件”，這部分如何實作跳轉的可以看知識傳送門，寫得很詳細，我沒必要再畫蛇添足了

ndex其實就是做了一堆配置然後就傳遞給login了，但是他做了一個很重要的行為，構造了Navigator屬性，然後後續的頁面進行傳遞

登入頁面

登入頁面和上一個例子裡的代碼沒什麼差別，主要差異就是再判斷表單之後進行跳轉頁面，代碼如下

name是我們我們要跳轉頁面傳給下一個頁面的參數

它可以在 this.props.name得到我們login頁面傳遞過去的值

type是我們跳轉的動畫效果，對應的找Navigator的configureScene方法

檔案頭也要申明我們下一個被跳轉的元件

import Main from './main.android';
           

_jump(name, type = 'Normal') {
        this.props.navigator.push({
          component: Main,
          passProps: {
            name: name
          },
          type: type
        })
      }
           

push類似于 我們平時的startActivity的行為，API介紹可以看http://facebook.github.io/react-native/docs/navigator.html

登陸成功了那就跳到了我們的首頁

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

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: '',
        }
    }

    componentDidMount() {
        this.setState({name: this.props.name});
    }
    render() {
        return (
            <View>
                <Text>獲得的參數: value = {this.state.name}</Text>
            </View>
        );
    }
}

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

我們在首頁的componentDidMount方法裡把傳來的參數給Main頁面的name字段指派，然後呈現在Text上就行了

總結：

這是個很強大的控件，可用于頁面跳轉。

要是用隻需要

1.構造Navigator

2.配置Navigator結合業務邏輯

3.調用push，jump等方法進行跳轉

源碼位址：https://github.com/ddwhan0123/ReactNativeDemo