前言

眾所周知在React Native中如何實現頁面的跳轉,這是一個突破點也是一個難點,想讓我們的頁面切換起來動起來應該是每一個初學者所追求的,那么在RN中實現這樣的功能那必須要了解Navigator的用法了.Navigator是React Native自帶的組件,不需要導入第三方組件,下面就來具體說明如何使用.

方法如下

首先,我們最好不要把index.ios.js和index.android.js文件寫的很冗余很多代碼,可以僅僅將其當做是一個工程的入口,好,廢話不多說,開始上代碼.

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

2.代碼編寫

代碼實現

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

configureScene(route){   if(route.sceneConfig){ return route.sceneConfig; }   return Navigator.SceneConfigs.FloatFromRight;//這里是設置頁面切換的動畫效果,具體可參考官網}

頁面初始化

import LoginPage from './pages/login';const initialRoute = {  name: 'login',  page: LoginPage,};

這幾句代碼相當于是初始化,從index.ios.js中導入了index.js文件,而index.js文件相當于設置了路由,初始化跳轉到login頁面.那么是不是實現跳轉每個頁面都要這么寫呢?當然不是!

3.后續頁面的跳轉

上述代碼說了初始跳轉到login頁面,那么login頁面跳轉到其他頁面是不是還要寫這么多代碼呢?當然你愿意寫這么多也是可以的,這里講解更簡潔的方式.

首先,在login頁面import需要跳轉到的目標頁面.

目標頁面導入

然后,記得寫上這個方法,接收props

constructor(props, context) { super(props);}

定義一個方法,如下圖所示,name為目標頁面的文件名,name為import時起的名.

目標頁面跳轉方法

最后,調用方法實現跳轉.

方法調用

也可以在Button ,TouchableHighlight等組件中調用.

后續的頁面以此類推,可以實現頁面跳轉的功能,希望對你們有所幫助.

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。