底部导航栏的使用(加上图标)

import React, { Component } from "react";
import { createBottomTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import ReList from "./ReList";

const Good = () => {
  return <ReList tab="good" />;
};
const Share = () => {
  return <ReList tab="share" />;
};
const Ask = () => {
  return <ReList tab="ask" />;
};

const DiBu = createBottomTabNavigator(
  // 底部导航栏
  {
    Good: {
      screen: Good,
      navigationOptions: {
        title: "帖子"
      }
    },
    Share: {
      screen: Share,
      navigationOptions: {
        title: "发布"
      }
    },
    Ask: {
      screen: Ask,
      navigationOptions: {
        title: "我的"
      }
    }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Good") {
          //切换不同的图标
          iconName = `ios-document`;
        } else if (routeName === "Share") {
          iconName = `ios-create`;
        } else if (routeName === "Ask") {
          iconName = `ios-person`;
        }
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    })
  }
);
export default ButtomNav;