這篇文章主要講解了“react native路由跳轉(zhuǎn)如何實(shí)現(xiàn)”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“react native路由跳轉(zhuǎn)如何實(shí)現(xiàn)”吧！

韓城網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,韓城網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為韓城近1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的韓城做網(wǎng)站的公司定做！

react native路由跳轉(zhuǎn)的實(shí)現(xiàn)方法：1、使用“yarn add react-navigation”命令安裝“react-navigation”；2、通過(guò)“yarn add react-native-gesture-handler”命令安裝“react-native-gesture-handler”組件；3、設(shè)置好初始路由，然后以類的組件的形式導(dǎo)出即可。

React Native-路由跳轉(zhuǎn)

搭建完RN開發(fā)環(huán)境后，要實(shí)現(xiàn)多個(gè)頁(yè)面之間的跳轉(zhuǎn)。

1.這時(shí)需要安裝react-navigation（在此之前的Navigator和ex-Navigation已經(jīng)廢棄），使用yarn add react-navigation命令進(jìn)行安裝。

2.react-navigation依賴于react-native-gesture-handler組件，因此也需要使用yarn add react-native-gesture-handler命令進(jìn)行安裝。

3.兩個(gè)組件安裝成功后，在index.js（入口文件，有可能是index.android.js或index.ios.js）注冊(cè)一個(gè)App組件，引用自setup.js。

4.在setup.js中導(dǎo)入createStackNavigator, createAppContainer兩個(gè)函數(shù)和兩個(gè)頁(yè)面。

import { createStackNavigator, createAppContainer } from "react-navigation";
import { Login } from "./js/pages/login";
import { ScanDevice } from "./js/pages/scanDevice";

5.用createStackNavigator封裝好兩個(gè)頁(yè)面的路由和標(biāo)題的配置，設(shè)置好初始路由。

const AppNavigator = createStackNavigator({
   Login: {
       screen:Login,
       navigationOptions: {
           title: '冷鏈物流助手',
           headerTitleStyle:{
               textAlign: 'center',
               flex:1,
           }
       }
   },
   ScanDevice: {
       screen:ScanDevice,
       navigationOptions: {
           title: '掃描設(shè)備',
           headerTitleStyle:{
               textAlign: 'center',
               marginLeft:-25,
               flex:1,
           }
       }
   },
},{
   initialRouteName: 'Login'
});

6.將配置好的AppNavigator再用另一個(gè)函數(shù)createAppContainer封裝，然后以類的組件的形式導(dǎo)出。

const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
   render() {
       return ;
   }
}

7.運(yùn)行react-native run-android,如有報(bào)錯(cuò)則查詢谷歌一步步解決。若出現(xiàn)Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED報(bào)錯(cuò)，則按照l(shuí)ink/be47acb6bb8806ab820fd1081686a767解決。

感謝各位的閱讀，以上就是“react native路由跳轉(zhuǎn)如何實(shí)現(xiàn)”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)react native路由跳轉(zhuǎn)如何實(shí)現(xiàn)這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！