溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關Native中Navigator怎么在React中使用，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
首先,我們最好不要把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等組件中調用.
以上就是Native中Navigator怎么在React中使用，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
