从 React Native 中的图像组件中的 JSON 数据导入图像字符串

Question

我正在尝试从模拟数据数组中获取图像字符串并将其推送到 React Native 中的 <Image> 组件中。这是我的 Data 数组：

const data= [
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '.99',
    image: '../assets/img/item01.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '.99',
    image: '../assets/img/item02.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '.99',
    image: '../assets/img/item03.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '.99',
    image: '../assets/img/item04.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '.99',
    image: '../assets/img/item05.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '.99',
    image: '../assets/img/item06.jpg',
  },
  {
    title: 'Lorem ipsum dolor sit amet.',
    price: '.99',
    image: '../assets/img/item07.jpg',
  },
];

我正在尝试通过映射 data 数组来使用 image 值。图像组件是：

<View style={{
      width: 164,
      height: 164,
      borderRadius: (1 / 2) * 164,
      backgroundColor: color.white,
      shadowColor: 'rgba(57,57,57,0.5)',
      shadowOffset: { width: 0, height: 1 },
      shadowRadius: 2,
      elevation: 20,
      overflow: 'hidden',
}}>
 <Image
  source={require(data.image)}
  resizeMode='contain'
  style={{ width: null, height: null, flex: 1 }}
 />
</View>

如果我使用它，则会发生错误： Invalid call at line 60: require(item.illustration)

如果我使用- source={{ uri: item.illustration }} 而不是 require 函数，然后 Nothing 出现。谁能帮我解决如何从数组导入本地图像？

Answer 1

如果你使用的是本地图片，那么你需要添加require函数来加载图片，当你要通过url显示时，你需要添加uri

您可以使用 require 函数在您的 Data Array 中添加本地图像，就像这样

const data= [
 {
 title: 'Lorem ipsum dolor sit amet.',
 price: '.99',
 image: require(../assets/img/item01.jpg),
 },
 {
 title: 'Lorem ipsum dolor sit amet.',
 price: '.99',
 image: require(../assets/img/item01.jpg),
 },
]

在你的图像视图中只需要这样调用它

<Image
 source={data.image}
 resizeMode='contain'
 style={{ width: null, height: null, flex: 1 }}
/>

如果您无法实现，那么您也可以像这样导出图像并添加到您的 Data 数组

export const first_img = require('../assets/img/item01.jpg');
export const second_img = require('../assets/img/item01.jpg');


const data= [
 {
 title: 'Lorem ipsum dolor sit amet.',
 price: '.99',
 image: first_img,
 }
]

同样可以调用

Answer 2

有点晚了，但希望它能对某人有所帮助。您可以使用 Image

中的 resolveAssetSource

const data= [
       { title: 'Lorem ipsum dolor sit amet.',
         price: '.99',
         image: Image.resolveAssetSource(require("../assets/img/item01.jpg")).uri, 
       }
      ]

当然需要先导入Image，

import { Image } from "react-native";

从 React Native 中的图像组件中的 JSON 数据导入图像字符串

Import image string from JSON Data in Image component in React Native

react-native

react-native-image