Javascript 我正在尝试将图像添加到选项卡栏项，但未加载

我想将图像添加到选项卡栏图标，并想更改选项卡栏背景色

提到

从“React”导入React；
从“react native”导入{Text，View，Image}；
从“反应导航”导入{CreateBoottomTabNavigator，createAppContainer}
从“/ScreenOne”导入ScreenOne；
从“/Screentwo”导入Screentwo；
从“./Preferences”导入首选项；
const TabNavigator=createBottomTabNavigator(
{
主页：ScreenOne，
设置：第二屏，
偏好：偏好
},
{  
初始路由名称：“主页”，
showLabel:false，
tabBarPosition:'底部'，
选项卡选项：{
activeTintColor:'蓝色'，
颜色：“灰色”，
风格：{
背景颜色：“深蓝色”
},
标签样式：{
尺寸：13
}
},
defaultNavigationOptions:（{navigation}）=>({
tabBarIcon:（{聚焦、水平、着色、图像}）=>{
const{routeName}=navigation.state；
让图像路径；
如果（路由名称==“主”）{
imagepath=“require（'../images/Help_Header_Icon.png'）”；
}else if（路由名称==“设置”）{
imagepath=“require（'../images/Settings.png'）”；
}else if（routeName==“首选项”）{
imagepath=“require（'../images/Preference.png'）”；
}
返回(
);
}
}
)
}
);
导出默认createAppContainer（TabNavigator）；

我想将图像添加到选项卡栏图标并想更改选项卡栏 背景色

---

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

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}
        />
      );

if（routeName==“Home”）{
imagepath=images.imagepathA；
}else if（路由名称==“设置”）{
imagepath=images.imagepathB；
}else if（routeName==“首选项”）{
imagepath=images.imagepathC；
}
返回(
);

“require（'../images/Help\u Header\u Icon.png'）”-尝试在不使用“../I removed”的情况下使用它，然后也不工作。现在，检查路径（例如，您可以将imagepath=require（'../images/Help\u Header\u Icon.png'移动到文件头，并在console.log中显示）路径正确此代码在应用程序启动后运行正常图标未加载我现在得到了图标，因为我用不同的颜色更改了图像，因为条形图颜色和图像都是白色的，我如何更改条形图的颜色？

 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}
        />
      );