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);  //引处也须要修改复制代码

从新运行程序，这个一个简单的从登陆页跳转到首页，再从首页跳转到其余页面的路由导航配置就基本完成了。