我正在使用带有 expo 的 react native，我需要将所有图像导入一个文件夹中，并在每个循环中按名称使用它们我使用了react-native-super-grid 中名为 FlatGrid 的这个组件来创建一个带有来自字典的图像的 CSS 网格，例如这个
[
{ name: "AppleMusic.png"},
{ name: "discord.png" },
]
<FlatGrid
itemDimension={150}
data={items}
spacing={10}
windowSize={300}
renderItem={({ item }) => (
<View>
<Image
source={require(`../ui/icons/${item.name}.png`)}
/>
<Text>
{item.name}
</Text>
</View>
)}
/>
但我没有使用过source={require(`../ui/icons/${item.name}.png`)} ，我尝试了所有我能想到的方法，比如将图像导入到一个单独的文件中并像这样导出它们
const images = {
applemusic: require("../ui/icons/AppleMusic.png"),
discord: require("../ui/icons/discord.png")
}
export default images;
只为帮助你！当我像这样导入单个图像并像这样import AppleMusic from "../ui/icons/AppleMusic.png";使用它时它确实有效，source={require(AppleMusic)}但是即使我对所有图像（准确地说是 25image）都这样做了，我仍然无法解决遍历导入图像的问题
在您的Image文件夹中创建一个 index.js 文件并像这样导入所有图像
export const image1 = require('./image1.jpg')
export const image2 = require('./image2.jpg')
export const image3 = require('./image3.jpg')
export const image4 = require('./image4.jpg')
然后在您的类中，您可以导入图像并使用这些图像来创建图像数组
import {image1,image2,image3,image4} from './images'
const items=[
{ name: image1},
{ name: image2 },
{ name: image3 },
{ name: image4 },
]
然后你可以像这样使用它
<FlatGrid
itemDimension={150}
data={items}
spacing={10}
windowSize={300}
renderItem={({ item }) => (
<View>
<Image
source={item.name}
/>
<Text>
{item.name}
</Text>
</View>
)}
/>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句