用反引号反应原生要求答案

【问题标题】：React native require with backticks用反引号反应原生要求
【发布时间】：2020-12-15 13:59:13
【问题描述】：

我正在实现一个应用程序，在主屏幕上我有一个平面列表元素，每个项目内部都有一个卡片元素。

import React, { useEffect, useContext } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import {ListItem, Card} from 'react-native-elements';

import { Context as ParkingContext } from '../context/ParkingContext';

const HomeScreen = () => {
    const { state: {records}, fetchParkings } = useContext(ParkingContext);

    useEffect(() => {
        fetchParkings();
    },[])

    return (
        <View style={styles.container}>
            <FlatList 
                data={records}
                keyExtractor={item => item.recordid}
                renderItem={({item}) => {
                    return (
                        <Card containerStyle={styles.cardStyle} title={item.fields.description}>
                            <Text style={styles.textStyle}>{item.fields.address.replace(/\n/g,'')}</Text>
                            <Text style={styles.textStyle}>Aantal vrije plaatsen: {item.fields.availablecapacity}</Text>
                        </Card>
                    )
                }}
            />
        </View>
    )
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop: 25
    },
    cardStyle: {
        padding: 0,
        borderRadius: 10
    },
    textStyle: {
        flexDirection: 'row',
        flex: 1,
        marginBottom: 10,
        marginLeft: 5
    }
});

export default HomeScreen;

card元素有一个属性image，可以用来给卡片设置一张图片。我想通过这样做为卡片提供不同的图像

image={require(`../../assets/${item.fields.description}.jpg`)}

但 require 不允许我使用反引号和变量来执行此操作...有什么方法可以使用反引号或变量，以便我可以为不同的卡片制作不同的照片？

如果答案很明显，我深表歉意，但我尝试了很多东西，但它不起作用。

【问题讨论】：

现有 SO 帖子上有不同的选项似乎可以解决您的困境：stackoverflow.com/a/43821056/1188197。这篇博文 (willowtreeapps.com/ideas/…) 在 SO 帖子中也被引用，总结了如何在 require 函数中使用相对路径。简而言之，您不能使用变量代替文字字符串，...并且 require 语句在捆绑时解析。相反，您可以按照我分享的 SO 链接中的方式定义静态资产。

标签： reactjs react-native require react-native-elements

【解决方案1】：

假设您使用create-react-app 创建了您的 React 应用程序，或者您正在使用 webpack 来捆绑您的代码，那么您想要实现的目标将不起作用：由于 Webpack 在构建时运行，它无法确定哪些模块当名称是动态变量时进行捆绑。打包在运行前发生一次，因此这些变量还没有值。

如果你有少量图片，你可以这样做：

let image1 = require('../../assets/xxx.jpg');
let image2 = require('../../assets/xxx.jpg');
...
image={image1}
...

当然，如果您的图片列表很长，这种方式将不是最佳选择

更多细节可以在this issue的讨论中找到

【讨论】：