用反引号反应本机需求

问题描述

我正在实现一个应用程序，在主屏幕上，我有一个flatlist元素，其中每个项目内部都有一个card元素。

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;

卡元素具有一个属性图像，可用于为卡设置图像。我想通过给卡片提供不同的图像

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

但是require不允许我使用反引号和变量来进行此操作...可以使用某种方式使用反引号或变量，以便为不同的卡片使用不同的照片吗？

如果答案很明显，我会道歉，但是我尝试了很多事情，但是没有用。

解决方法

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

如果图像数量很少，则可以执行以下操作：

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

但是，当然，如果您的图像列表很长，这种方法就不是最佳选择

---

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