时间戳

首页 > 解决方案 > React Native，如何使用 require 函数在图像链接中添加变量

javascript - React Native，如何使用 require 函数在图像链接中添加变量

问题描述

我将图像本地存储在项目文件夹中，我想在图像源中添加一个变量（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')} />

标签： javascriptreact-native

解决方案

Unfournatelyrequirejs模块不能那样工作

您必须完全创建字符串或创建一个将 a 映射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}/>
</>
...

推荐阅读