React Native Element Dropdown本地图片无法加载问题求助

我正在开发一个语言选择下拉菜单，使用Imgur在线图片时应用运行正常，但无法实现本地图片的离线加载。

现有代码 #

数据定义

import React, { useState } from "react";
import { StyleSheet } from "react-native";
import { SelectCountry } from "react-native-element-dropdown";

const local_data = [
  {
    value: "1",
    lable: "English",
    image: {
      uri: "https://i.imgur.com/xIuOPwq.gif",
    },
  },
  {
    value: "2",
    lable: "Swedish",
    image: {
      uri: "https://i.imgur.com/lCmlkhG.png",
    },
  },

  {
    value: "3",
    lable: "Japanese",
    image: {
      uri: "https://i.imgur.com/EL9UnZd.png",
    },
  },
  {
    value: "4",
    lable: "Danish",
    image: {
      uri: "https://i.imgur.com/h5lYMuT.png",
    },
  },
  {
    value: "5",
    lable: "Finnish",
    image: {
      uri: "https://i.imgur.com/wGo0ftj.jpeg",
    },
  },
];

样式表

const styles = StyleSheet.create({
  dropdown: {
    margin: 16,
    height: 50,
    width: 150,
    backgroundColor: "#EEEEEE",
    borderRadius: 22,
    paddingHorizontal: 8,
  },
  imageStyle: {
    width: 24,
    height: 24,
    borderRadius: 12,
  },
  placeholderStyle: {
    fontSize: 16,
  },
  selectedTextStyle: {
    fontSize: 16,
    marginLeft: 8,
  },
  iconStyle: {
    width: 20,
    height: 20,
  },
});

已尝试的无效方案 #

• uri: "./path/to/the/image.jpg"：无效
• uri: require("../assets/images/flags/american.jpg"),：报错ERROR Warning: Failed prop type: Invalid prop source supplied to Image, expected one of type [number, string].
• source: require("../assets/images/flags/american.jpg"),：无效

请问操作有误的地方在哪里？如何实现下拉菜单加载本地图片？

问题根源 #

你错误匹配了react-native-element-dropdown组件中SelectCountry的图片配置规则：

1. 在线图片用{ uri: "url" }是因为网络图片的source需要对象格式，但本地图片通过require()获取的是数字资源ID，不能嵌套在uri字段中。
2. 你尝试的source: require(...)格式不符合组件要求，该组件规定图片数据直接放在image字段下，无需额外嵌套source。

正确实现方式 #

修改local_data中的图片配置，直接将require()的结果赋值给image字段：

const local_data = [
  {
    value: "1",
    lable: "English",
    image: require("../assets/images/flags/american.jpg"), // 直接赋值require返回的资源ID
  },
  {
    value: "2",
    lable: "Swedish",
    image: require("../assets/images/flags/swedish.jpg"),
  },
  // 其余选项按此格式修改
];

额外注意事项 #

• 路径要准确：路径是相对于当前组件文件的相对路径，比如组件在src/screens/LanguageSelect.js，图片在src/assets/images/flags/，则路径为../assets/images/flags/american.jpg。
• 禁止动态路径：React Native的require()不支持拼接字符串的动态路径，必须写死完整路径，否则编译会报错。
• 检查图片格式：确保图片是React Native支持的格式（png、jpg、gif等），文件名无特殊字符或空格。

内容的提问来源于stack exchange，提问作者kriptcscs