我正在尝试将图像添加到标签栏项目但未加载答案

【问题标题】：I am trying to add image to tab bar item but is not loading我正在尝试将图像添加到标签栏项目但未加载
【发布时间】：2019-12-17 18:59:07
【问题描述】：

我想将图像添加到标签栏图标并想更改标签栏背景颜色

指https://github.com/react-navigation/react-navigation/issues/1205#issuecomment-296708338

import React from 'react';
import { Text, View, Image } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation'
import ScreenOne from './ScreenOne';
import Screentwo from './Screentwo';
import Preferences from './Preferences';



const TabNavigator = createBottomTabNavigator(
  {
  Home: ScreenOne,
  Settings: Screentwo,
  Preference: Preferences
},
{  
  initialRouteName: "Home",
  showLabel: false,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    activeTintColor: 'blue',
    inactiveTintColor: 'grey',
    style: {
      backgroundColor: 'darkcerulean'
    },
    labelStyle: {
      fontSize: 13
    }
  },
  defaultNavigationOptions: ({ navigation }) => ({
    tabBarIcon: ({ focused, horizontal, tintColor, image }) => {
      const { routeName } = navigation.state;
      let imagepath;

      if (routeName === "Home") {
        imagepath = "require('../images/Help_Header_Icon.png')";
      } else if (routeName === "Settings") {
        imagepath = "require('../images/Settings.png')";
      } else if (routeName === "Preference") {
        imagepath = "require('../images/Preference.png')";
      }
      return (
        <Image
          style={{ width: 30, height: 30, resizeMode: "stretch" }}
          source={imagepath}
        />
      );
    }
  }
  )
}
);


export default createAppContainer(TabNavigator);

我想将图像添加到标签栏图标并想更改标签栏背景颜色

【问题讨论】：

"require('../images/Help_Header_Icon.png')" - 尝试在没有“...”的情况下使用它
我删除了 " " 然后也没用
现在，检查您的路径（例如，您可以将 imagepath = require('../images/Help_Header_Icon.png' 移动到文件头，并在 console.log 中显示）
路径正确此代码在应用启动图标未加载后完美运行
我现在得到了图标，因为我改变了不同颜色的图像，因为条形颜色和图像都是白色的，我怎样才能改变条形的颜色？

标签： javascript ios react-native react-navigation jsx

【解决方案1】：

你需要像这样加载你的需求

const images = {
  imagepathA: require('../images/Help_Header_Icon.png'),
  imagepathB: require('../images/Settings.png'),
  imagepathC: require('../images/Preference.png'),
};

在你的回报中像这样使用它

 if (routeName === "Home") {
    imagepath = images.imagepathA;
  } else if (routeName === "Settings") {
    imagepath = images.imagepathB;
  } else if (routeName === "Preference") {
    imagepath = images.imagepathC;
  }
  return (
        <Image
          style={{ width: 30, height: 30, resizeMode: "stretch" }}
          source={imagepath}
        />
      );

【讨论】：