React Native，如何在帶有require函數的圖像鏈接中添加變量

Question

我將圖像本地存儲在項目文件夾中，並且我想在圖像源（帶有要求）中添加一個變量（nature.png），所以我這樣做了

let i = 'natrue';
let imagePath = require('../asset/gallery/image/');
    return (
        <View >
            <Image source={{imagePath} + i + '.png'}/>
        </View>

但我得到了一個錯誤：

text string must be rendered within a text component

我不想這樣做（工作正常），因為我有 100 多個圖像：

<Image source={require('../asset/gallery/image/nature.png')} />

Answer 1

Unfournately requirejs模塊不能那樣工作

您必須完全創建字符串或創建一個將key映射到圖像的對象。 這也是遵循的最佳實踐。

您可以創建一個名為 image.js 的文件並從那里導出所有圖像，

例如

// image.js

const BASE_URL = "../asset/gallery/image/";

export default {
  nature:require(`${BASE_URL}nature.png`),
}

在你的組件中，

import Images from "src/images";

...
<>
   <Image src={Images.nature}/>
</>
...