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);  //引处也需要修改

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