react native路由跳轉怎麼實現

react native路由跳轉的實作方法：1、使用「yarn add react-navigation」指令安裝「react-navigation」；2、透過「yarn add react-native-gesture-handler」指令安裝「 react-native-gesture-handler」元件；3、設定好初始路由，然後以類別的元件的形式匯出即可。

本教學操作環境：Windows10系統、React Native0.67版、Dell G3電腦。

react native路由跳轉怎麼實現？

React Native-路由跳轉

建置完RN開發環境後，要實現多個頁面之間的跳躍。

 

1.這時需要安裝react-navigation（在此之前的Navigator和ex-Navigation已經廢棄），使用yarn add react-navigation指令進行安裝。

 

2.react-navigation依賴react-native-gesture-handler元件，因此也需要使用yarn add react-native-gesture-handler指令來安裝。

 

3.兩個元件安裝成功後，在index.js（入口文件，有可能是index.android.js或index.ios.js）註冊一個App元件，引用自setup.js。

 

4.在setup.js中匯入createStackNavigator, createAppContainer兩個函數和兩個頁面。

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

5.用createStackNavigator封裝好兩個頁面的路由和標題的配置，設定初始路由。

const AppNavigator = createStackNavigator({
    Login: {
        screen:Login,
        navigationOptions: {
            title: '冷链物流助手',
            headerTitleStyle:{
                textAlign: 'center',
                flex:1,
            }
        }
    },
    ScanDevice: {
        screen:ScanDevice,
        navigationOptions: {
            title: '扫描设备',
            headerTitleStyle:{
                textAlign: 'center',
                marginLeft:-25,
                flex:1,
            }
        }
    },
},{
    initialRouteName: 'Login'
});

 

6.將設定好的AppNavigator再用另一個函數createAppContainer封裝，然後以類別的元件的形式匯出。

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

 

7.執行react-native run-android,如有報錯則查詢Google一步步解決。若出現Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED報錯，則依照https://www.php.cn/link/be47acb6bb8806ab820fd1081686a767解決。

 推薦學習：《react影片教學》

以上是react native路由跳轉怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！