设置< Image/>的来源可变的 [英] Setting source of <Image/> with variable

问题描述

我正在尝试一些如下的本机代码，我想按如下所示将静态图像设置为图像视图，但它不会加载

I am trying some react native code which is as follows , I want to set the static images to an image view as follows but it doesn't load

const items = [
            { name: './images/home.png', code: '#1abc9c' }, { name: './images/home.png', code: '#2ecc71' },
            { name: './images/home.png', code: '#3498db' }, { name: './images/home.png', code: '#9b59b6' }
        ];

        return (
            <ImageBackground
                source={require('./images/marble.jpg')}
                style={styles.backgroundImage}>

                <GridView
                    itemDimension={130}
                    items={items}
                    style={styles.gridView}
                    renderItem={item => (
                        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
                            <Image source={require(item.name)}></Image>
                        </View>
                    )}
                />

            </ImageBackground>
        );

我得到的错误是

对 require 的调用期望恰好有1个字符串文字参数，但这被发现: require(item.name).

calls to require expect exactly 1 string literal argument, but this was found: require(item.name).

当然，我是新来的本地人，所以请忽略我错过的术语

Ofcourse I am new to react native so kindly ignore my missed terminology

推荐答案

您尝试这样

const items = [{ name: require('./images/home.png'), code: '#1abc9c' },{...}]

然后

<Image source={item.name}></Image>

这篇关于设置< Image/>的来源可变的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！