React Native-路由跳轉

搭建完RN開發環境后（搭建方式可查看https://www.cnblogs.com/luoyihao/p/11178377.html），要實現多個頁面之間的跳轉。

 

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,如有報錯則查詢谷歌一步步解決。若出現Task :react-native-gesture-handler:compileDebugJavaWithJavac FAILED報錯，則按照https://www.cnblogs.com/luoyihao/p/11222534.html解決。