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

標籤：turn   .net   exp   推送   ++   ges   開始   組件   figure   

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

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

還是先安利：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:1}}        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

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