时间戳

首页 > 解决方案 > 如何在本机反应中动态传递图像？

react-native - 如何在本机反应中动态传递图像？

问题描述

我有以下代码：

let fileIcon = props.type == DOCUMENT_TYPE.Project ? "024-folder-16" : "file";
let concatString = '../assets/images/'.concat(fileIcon, 'png');

我稍后会尝试使用值“concatString”：

let fileIcon = props.type == DOCUMENT_TYPE.Project ? "024-folder-16" : "file";
let concatString = '../assets/images/'.concat(fileIcon, 'png');

const renderChapterItem = chapterData => {
    return (
        <TouchableOpacity 
            style={styles.gridItem} 
            onPress={() => { 
                props.navigation.navigate("Document", {text: chapterData.item[1]})
            }}
        >
            <Image
                style={styles.image}
                source={require(concatString)}/>
    )
}

但是，我不断收到错误消息

第 21 行的无效调用：require(concatString)

标签： react-native

解决方案

让 concatString = '../assets/images/'.concat(fileIcon, '.png'); 用上面给定的变量替换你的 concatString 。您还没有添加“。” 在扩展“png”之前。

另外的选择：

分别导入两个图像，并使用它们而不是 require 语句。喜欢 ：

import img1 from '../../{YOUR_IMAGE_NAME_WITH_EXTENTION}';

import img2 from '../../{YOUR_IMAGE_NAME_WITH_EXTENTION}';


let img = (condition)? img1 : img2;


            <Image
                style={styles.image}
                source={img}/>

推荐阅读