导航栏配置

路由导航栏配置

更改标题

{
    Tab1: {
      screen: Tab1,
      navigationOptions: {
        title: "新闻"
      }
    },
    Tab2: {
      screen: Tab2,
      navigationOptions: {
        title: "图片"
      }
    }
  },
  {
    //设置标题栏通配效果
    navigationOptions: {
      title: "标题"
    },
    //设置文本选中前后效果颜色
    tabBarOptions: {
      activeTintColor: "white", //激活样式
      inactiveTintColor: "#FF0000" //未激活样式
    },
    tabBarPosition: "top", //设置显示位置
    swipeEnabled: false, //是否可以滑动
    animationEnabled: true //滑动效果
  }

底部图片配置(网络图片)

 {
    Tab1: {
      screen: Tab1,
      navigationOptions: {
        title: "首页"
      }
    },
    Tab2: {
      screen: Tab2,
      navigationOptions: {
        title: "我的"
      }
    }
  },
  {
    //设置选中和未选中的颜色（文字、图片、背景）
    tabBarOptions: {
      // activeTintColor: "#0000FF",
      // inactiveTintColor: "#FFFFFF"
      // activeBackgroundColor: "#FFFFFF",
      // inactiveBackgroundColor: "#0000FF"
    },

    //配置底部导航图片
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "Tab1") {
          iconName = "ios-document";
        } else if (routeName === "Tab2") {
          iconName = "ios-create";
        }

        return <Ionicons name={iconName} size={25} color={tintColor} />;
      }
    })
  }

底部配置图片(本地图片)

import { createBottomTabNavigator } from "react-navigation";
import Ionicons from "react-native-vector-icons/Ionicons";
import React from "react";
import { Image } from "react-native";
import Home from "./Home";
import Cai from "./Cai";
const Route = createBottomTabNavigator(
  {
    Home: {
      screen: Home,
      navigationOptions: {
        title: "首页",
        header: null
      }
    },
    Cai: {
      screen: Cai,
      navigationOptions: {
        title: "财富",
        header: null
      }
    }
  },
  {
    backBehavior: "none",
    tabBarOptions: {
      activeTintColor: "#5599ff",
      style: {
        backgroundColor: "#f8f8f8"
      },
      indicatorStyle: {
        opacity: 0
      },
      tabStyle: {
        padding: 0
      },
      labelStyle: {
        fontSize: 12
      }
    },
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        if (routeName === "Home") {
          if (focused) {
            return (
              <Image
                style={{ width: 27, height: 27 }}
                source={require("../zf/a1.png")}
              />
            );
          } else {
            return (
              <Image
                style={{ width: 27, height: 27 }}
                source={require("../zf/a2.png")}
              />
            );
          }
        } else if (routeName === "Cai") {
          if (focused) {
            return (
              <Image
                style={{ width: 23, height: 23 }}
                source={require("../zf/b2.png")}
              />
            );
          } else {
            return (
              <Image
                style={{ width: 23, height: 23 }}
                source={require("../zf/b1.png")}
              />
            );
          }
        }
      }
    })
  }
);

export default Route;