React Native開發APP之(集成react-navigation 3.X組件1)

提及React-Native項目的導航組件，天然想起鼎鼎大名的react-navigation組件，該組件自發布己來，已經受到廣大開發者的關注，目前已經發展到3.X版本，而3.X版本的一些配置和使用方法相比以前的版本也發生了一些變化。下面將在上一篇《React Native開發APP之(初始化TypeScript版本React Native 0.60.X項目)》的基礎上，介紹一下如何集成最新版的react-navigation組件及一些經常使用導航的配置。

按照官方的指導文檔，react-navigation 3.X版本相比以前的版本最大的變化除了須要安裝react-navigation以外，還須要安裝react-native-gesture-handler和react-native-reanimated兩個支撐組件，不然會出錯。在項目根目錄下依次執行如下命令：

npm install react-navigation --save 
npm install react-native-gesture-handler --save 
npm install react-native-reanimated --save
複製代碼

正如上一篇文章所介紹，React Native 0.60.0之後會自動連接第三方原生庫，可是iOS端完成連接，須要用Cocoapods來安裝其相應依賴，依次執行如下命令：

cd ios
pod install && cd ..
複製代碼

以下圖所示，會完成RNGestureHandler (1.4.1)和RNReanimated (1.2.0)兩個原生庫的連接，這樣就表示iOS端全部的配置都已經城了。

下面重點介紹一下怎樣一步步用react-navigation來完成路由配置。首先要實現一個帶底部導航欄的首頁，效果以下圖所示：

要完成以上的界面，主要要運用react-navigation中的createBottomTabNavigator這個方法。咱們在項目的根目錄下建立src/pages目錄，分別建立Page2.tsx、Page2.tsx、Page2.tsx三個文件，其主要內容以下：

import * as React from "react";
import { View, Text, StyleSheet } from "react-native";
export default class Page1 extends React.Component<any> {
  public render() {
    return (
      <View style={Styles.container}>
        <Text>我是Page1</Text>
      </View>
    );
  }
}
const Styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});
複製代碼

而後再將App.tsx替換以下代碼：

import { createBottomTabNavigator, createAppContainer } from "react-navigation";
import Page1 from "./src/pages/Page1";
import Page2 from "./src/pages/Page2";
import Page3 from "./src/pages/Page3";
const BottomNavigator = createBottomTabNavigator(
  {
    Page1: {
      screen: Page1,
      navigationOptions: {
        title: "頁面1",
        tabBarLabel: "頁面1"
      }
    },
    Page2: {
      screen: Page2,
      navigationOptions: {
        title: "頁面2",
        tabBarLabel: "頁面2"
      }
    },
    Page3: {
      screen: Page3,
      navigationOptions: {
        title: "頁面3",
        tabBarLabel: "頁面3"
      }
    }
  },
  {
    initialRouteName: "Page1",
    tabBarOptions: {
      showIcon: false,
      activeTintColor: "#333333",
      inactiveTintColor: "#999999",
      activeBackgroundColor: "#f6f6f6",
      inactiveBackgroundColor: "#f6f6f6",
      labelStyle: {
        fontSize: 10
      },
      style: {
        borderTopWidth: 0,
        backgroundColor: "#f7f7f7"
      }
    }
  }
);
export default createAppContainer(BottomNavigator);  複製代碼

從新運行以後，就能夠看到上圖中帶有底部導航的首頁了。createBottomTabNavigator中的主要的一些配置參數能夠參考連接

有了首頁以後，咱們常常還須要從首頁跳轉到其餘頁面，或者從其餘頁面跳轉到首頁，實現這種路由配置，就須要用到react-navigation中的createStackNavigator方法。咱們src/pages下另外新增兩個文件Login.tsx和Page4.tsx，Login.tsx中放置一個登陸按鈕，代碼以下:

export default class Login extends React.Component<any> {
  public render() {
    return (
      <View style={Styles.container}>
        <Text>我是登陸頁面</Text>
        <Button
          title="登陸"
          onPress={() => {
            this.props.navigation.navigate("Main");
          }}
        />
      </View>
    );
  }
}複製代碼

Page4.tsx中的內容和首頁Page1.tsx的內容相同, 同時在Page1.tsx中也增長一個按鈕：

export default class Page1 extends React.Component<any> {
  public render() {
    return (
      <View style={Styles.container}>
        <Text>我是Page1</Text>
        <Button
          title="去頁面4"
          onPress={() => {
            this.props.navigation.navigate("Page4");
          }}
        />
      </View>
    );
  }
}複製代碼

在App.tsx中增長如下代碼：

import { Animated, Easing } from "react-native";
import { createStackNavigator, createBottomTabNavigator,createAppContainer} from "react-navigation";
import StackViewStyleInterpolator from "react-navigation-stack/src/views/StackView/StackViewStyleInterpolator";

--------------

const AppNavigator = createStackNavigator(
  {
    Login: { screen: Login },
    Main: { screen: BottomNavigator },
    Page4: { screen: Page4 }
  },
  {
    initialRouteName: "Login",
    headerMode: "float",
    mode: "modal",
    defaultNavigationOptions: {
      header: null,
      gesturesEnabled: false
    },
    transitionConfig: () => ({
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing
      },
      screenInterpolator: sceneProps =>
        StackViewStyleInterpolator.forHorizontal(sceneProps)
    })
  }
);

export default createAppContainer(AppNavigator);  //引處也須要修改複製代碼

從新運行程序，這個一個簡單的從登陸頁跳轉到首頁，再從首頁跳轉到其餘頁面的路由導航配置就基本完成了。