React Native react-navigation 路由导航库

RN 项目 安装 react-navigation 路由导航库 react-native-vector-icons 图标库

# 安装 react-navigation 
yarn add react-navigation react-native-gesture-handler react-native-vector-icons

// package.json
{
  "name": "RNApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postinstall": "npx jetify"
  },
  "dependencies": {
    "@ant-design/react-native": "^3.1.9",
    "lodash": "^4.17.11",
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-swiper": "^1.6.0-nightly.2",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/runtime": "^7.5.0",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "babel-plugin-import": "^1.12.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "jetifier": "^1.6.1",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

android环境运行，需安装 jetifier，在package.json中配置 “postinstall”: “npx jetify”，执行 yarn

# 安装 jetifier
yarn add jetifier --dev

具体使用方法如下：
createStackNavigator：用于定义路由，实现页面跳转
createBottomTabNavigator：用于定义底部导航栏，实现页面切换
createAppContainer：用于管理路由、导航容器
Icon：用于定义字体图标
this.props.navigation.navigate(“NewsDetail”, { content: “I come from News” })：用于父子路由跳转，传参
this.props.navigaiton.state.params：用于接收父级路由传参
同时还可以动态设置子路由组件的标题

/**
 * @Author: brady
 * @Date: 2019/7/10
 * @Last Created time: 16:19:30
 * @Description:
 */
import React from "react";
import {
  createStackNavigator,
  createBottomTabNavigator,
  createAppContainer
} from "react-navigation";
import Icon from "react-native-vector-icons/Ionicons";

import Home from "../views/Home";
import News from "../views/News";
import Personal from "../views/Personal";
import HomePage from "../views/HomePage";
import NewsDetail from "../views/NewsDetail";
import PersonalInfo from "../views/PersonalInfo";

// 设置路由
const HomeRouteConfigs = {
  Home: {
    screen: Home,
    navigationOptions: {
      // header: null,
      title: "首页"
    }
  },
  HomePage: {
    screen: HomePage,
    navigationOptions: {
      title: "首页信息"
    }
  }
};
const NewsRouteConfigs = {
  News: {
    screen: News,
    navigationOptions: {
      title: "新闻"
    }
  },
  NewsDetail: {
    screen: NewsDetail,
    navigationOptions: ({ navigation }) => ({
      title: `${navigation.state.params.title}`
    })
  }
};
const PersonalRouteConfigs = {
  Personal: {
    screen: Personal,
    navigationOptions: {
      title: "个人中心"
    }
  },
  PersonalInfo: {
    screen: PersonalInfo,
    navigationOptions: {
      title: "我的资料"
    }
  }
};
// 全局配置
const StackNavigatorConfig = {
  headerLayoutPreset: "center",
  defaultNavigationOptions: {
    headerStyle: {
      gesturesEnabled: false,
      backgroundColor: "rgb(16, 142, 233)"
    },
    headerTitleStyle: {
      color: "#fff"
    },
    headerTintColor: "#fff",
    headerBackTitle: null
  },
  cardStyle: { backgroundColor: "#ccc" }
};
const HomeTab = createStackNavigator(HomeRouteConfigs, StackNavigatorConfig);
const NewsTab = createStackNavigator(NewsRouteConfigs, StackNavigatorConfig);
const PersonalTab = createStackNavigator(PersonalRouteConfigs, StackNavigatorConfig);

// 隐藏子路由 tabBar
let setTabBar = StackNavigatorArr => {
  StackNavigatorArr.map(item => {
    item.navigationOptions = ({ navigation }) => {
      let tabBarVisible = true;
      if (navigation.state.index > 0) {
        tabBarVisible = false;
      }
      return {
        tabBarVisible
      };
    };
  });
};
setTabBar([HomeTab, NewsTab, PersonalTab]);

// 设置tabBar
const TabRouteConfigs = {
  Home: {
    screen: HomeTab,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: "首页",
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          // name={focused ? "ios-home" : "ios-home"}
          name="ios-home"
          size={26}
          style={{ color: tintColor }}
        />
      )
    })
  },
  News: {
    screen: NewsTab,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: "新闻",
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          // name={focused ? "ios-paper" : "ios-paper"}
          name="ios-paper"
          size={26}
          style={{ color: tintColor }}
        />
      )
    })
  },
  Personal: {
    screen: PersonalTab,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: "个人中心",
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          // name={focused ? "ios-contact" : "ios-contact"}
          name="ios-contact"
          size={26}
          style={{ color: tintColor }}
        />
      )
    })
  }
};
const TabNavigatorConfig = {
  initialRouteName: "Home",
  tabBarOptions: {
    showIcon: true
  }
};
const TabNavigator = createBottomTabNavigator(
  TabRouteConfigs,
  TabNavigatorConfig
);

export default createAppContainer(TabNavigator);

实现效果如下：