1. 程式人生 > >React_Native頁面跳轉和Android回退鍵

React_Native頁面跳轉和Android回退鍵

首先文中內容參考一下網上的大神:


本文的頁面主要是這篇部落格的:

學習RN基本上都是以這位大神寫的作為藍圖:

還有一些RN的知識點參考了React-Native中文網:

首頁就是這樣的:基本看上去就和上面那位博主的頁面一模一樣


但我這邊使用按鈕,博主那些是<Text></Text>.

重點說一下RN是木有Button的,

木有Button,

木有Button,

木有Button,

重要事情說三篇;

我這裡是用


網上還有說有另外兩個View可以實現Button的效果;


這樣就可以實現效果如下圖的Button:


本篇不準備RN的樣式,這種東西感覺就是多練就有感覺,而且我自己還不是十分熟悉,先忽略;

這樣只說說

TouchableHighlight截圖上的屬性:

underlayColor={'#00CED7'}:是指點選後touchableHighlight的呈現什麼顏色;

onPress={this.loginInOnPress.bind(this)} :是指點選登入按鈕的點選方法,onPress是自定義方法名可以隨便起,這樣關鍵提一下需要繫結this;需要繫結this;
需要繫結this;.bind(this)  因為我寫的時候就是沒有注意這一點導致後面找不到一些屬性,找了很久才找到原因,只怪JS知識得太少了。

言歸正處就說回在RN是如何實現頁面跳轉的:

RN提供Navigator這麼一個東東:


該東東可以實現類似Intent跳轉的效果

需要寫一個Component啟動App時以這個Component作為第一個Component;


在該Component即StartComponent的render方法實現Navigator初始化


解釋下里面的每個屬性

ref = "navigator"是為了之後說的Android回退鍵用的,只是頁面跳轉時不需該ref的

initialRoute = {}  是傳入App的第一個頁面,name和component通常都是用同一個名字,但注意一個是字串,另一個是變數引用物件;這裡需要引入該變數引用物件的:


不然會報錯的,不過通過報錯資訊都可以很快看到錯誤原因;

configureScene 是配置頁面跳轉的動畫和手勢;該屬性可以不寫有預設的跳轉頁面動畫;

renderScene  是傳參和navigator物件全域性可用所需的;

這樣就定義了一個Navigator;然後看第一個頁面LoginView_Demo


上面截圖是一個點選事件的方法:

let _this = this;這裡是為了getUser方法使用當前的this;

const {navigator} = this.props;  是保證全域性使用同一個navigator物件;

這裡的寫法是es6的寫法等同於:

const navigator = this.props.navigator;

navigator.push說明navigator是一個數組型別,而且是一個堆疊結構。

name和Component是指跳轉的頁面,params是傳遞頁面的引數,getUser是一個回撥方法即另外一個頁面可以通過對該方法傳遞處理後的資料,然後供本頁面使用,簡而言之就像呼叫介面後返回資料的回撥方法。

在截圖上傳遞了id過去;我們看看跳轉的頁面如何處理:


在該頁面在頁面渲染完後:

componentDidMount方法:this.props.id可以獲取到之前頁面傳過來的引數;

this.props.getUser就是把處理後的資料回撥給上一頁面,這裡把user物件傳給前一個頁面;

最後,

navigator.pop();是彈棧,類似Android的finish()

Android回退鍵

在RN使用Android回退鍵需要新增監聽方法:

BackAndroid.addEventListener('hardwareBackPress',this.onBackAndroid.bind(this));

'hardwareBackPress' 是註冊安卓回退鍵;

this.onBackAndroid.bind(this); 是監聽安卓裝置的回退鍵

這裡涉及到RN的兩個生命週期的方法:

componentDidMount(){} 是頁面渲染完畢就會呼叫此方法

componentWillUnmount(){}  是頁面即將解除安裝就會呼叫此方法


這裡有個Constant.exitApp變數是為了實現,短時間點選兩次即退出程式。


類似於java的儲存常量的類,JS沒有類的概念就用一個物件儲存。

在看看onBackAndroid方法:


該方法有個返回值true  or   false;

返回true在測試過程中是沒有什麼反應的,

而返回false是呼叫預設的back鍵功能

還有一個方法就是BackAndroid.exitApp();是RN提供的退出程式的方法。

記錄測試時的情況

這裡有個地方需要注意,就是當你呼叫BackAndroid.exitApp()時,其實並沒有完全退出程式,其實與Android的機制是一致的。當原生把所有Activity  finnish掉,程式也不是完全退出的,Android系統會根據情況銷燬程式程序。

這裡就會出現一個情況,就是如果不在componentWillUnmount() {}方法重新把退出標誌設定為false即Constant.exitApp=false;再次進入程式就會是之前記錄的變數。因為之前我是把此變數寫在全域性


但在測試的時候發現重新進入程式是不會初始化該變數的。所以在componentWillUnmount() {}重新設定變數值。