前言

眾所周知在React Native中如何實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn),這是一個(gè)突破點(diǎn)也是一個(gè)難點(diǎn),想讓我們的頁(yè)面切換起來(lái)動(dòng)起來(lái)應(yīng)該是每一個(gè)初學(xué)者所追求的,那么在RN中實(shí)現(xiàn)這樣的功能那必須要了解Navigator的用法了.Navigator是React Native自帶的組件,不需要導(dǎo)入第三方組件,下面就來(lái)具體說(shuō)明如何使用.

方法如下

首先,我們最好不要把index.ios.js和index.android.js文件寫(xiě)的很冗余很多代碼,可以僅僅將其當(dāng)做是一個(gè)工程的入口,好,廢話不多說(shuō),開(kāi)始上代碼.

1.習(xí)慣于在工程目錄下建立js文件夾,并建立一個(gè)index.js文件(文件名可隨便取)

2.代碼編寫(xiě)

代碼實(shí)現(xiàn)

renderScene和configureScene方法可以寫(xiě)在<Navigator />中但是那樣會(huì)顯得臃腫,所以建議這種寫(xiě)法.

configureScene(route){

   if(route.sceneConfig){ return route.sceneConfig; }

   return Navigator.SceneConfigs.FloatFromRight;//這里是設(shè)置頁(yè)面切換的動(dòng)畫(huà)效果,具體可參考官網(wǎng)

}

頁(yè)面初始化

import LoginPage from './pages/login';

const initialRoute = {

  name: 'login',

  page: LoginPage,

};

這幾句代碼相當(dāng)于是初始化,從index.ios.js中導(dǎo)入了index.js文件,而index.js文件相當(dāng)于設(shè)置了路由,初始化跳轉(zhuǎn)到login頁(yè)面.那么是不是實(shí)現(xiàn)跳轉(zhuǎn)每個(gè)頁(yè)面都要這么寫(xiě)呢?當(dāng)然不是!

3.后續(xù)頁(yè)面的跳轉(zhuǎn)

上述代碼說(shuō)了初始跳轉(zhuǎn)到login頁(yè)面,那么login頁(yè)面跳轉(zhuǎn)到其他頁(yè)面是不是還要寫(xiě)這么多代碼呢?當(dāng)然你愿意寫(xiě)這么多也是可以的,這里講解更簡(jiǎn)潔的方式.

首先,在login頁(yè)面import需要跳轉(zhuǎn)到的目標(biāo)頁(yè)面.

目標(biāo)頁(yè)面導(dǎo)入

然后,記得寫(xiě)上這個(gè)方法,接收props

constructor(props, context) {

 super(props);

}

定義一個(gè)方法,如下圖所示,name為目標(biāo)頁(yè)面的文件名,name為import時(shí)起的名.

目標(biāo)頁(yè)面跳轉(zhuǎn)方法

最后,調(diào)用方法實(shí)現(xiàn)跳轉(zhuǎn).

方法調(diào)用

也可以在Button ,TouchableHighlight等組件中調(diào)用.

后續(xù)的頁(yè)面以此類推,可以實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)的功能,希望對(duì)你們有所幫助.

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論