时间戳

首页 > 解决方案 > 用反引号反应原生要求

reactjs - 用反引号反应原生要求

问题描述

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

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不允许我用反引号和变量来做到这一点......有没有办法使用反引号或变量，所以我可以为不同的卡片制作不同的照片？

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

标签： reactjsreact-nativerequirereact-native-elements

解决方案

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

如果您有少量图像，您可以执行以下操作：

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

但是，当然，如果您有很长的图像列表，这种方式将不是最佳的

更多细节可以在这个问题的讨论中找到

推荐阅读