Question

使用react-native组件。我有很多具有相似名称的图像，我必须在不同的文件和部分代码中检索。所以我创建了这个函数来解决所有问题：

export default getIcone = (icon, direction) => {
    var img = '../www/images/' + icon.toString() + '_' + direction + '.png'; 
    return img;
}

返回包含正确路径的字符串。问题是当我尝试在组件中调用它时。

render() {
        return( 
            <List>
                <FlatList
                data={this.state.monitorados}
                renderItem={({item}) => (
                    <TouchableHighlight
                          onPress={() => console.log("pressed")}
                    >
                          <View style={{backgroundColor: 'white', height: 60}}>
                            <Text>{item.identificador} {getIcone(item.icon, item.direcao)}</Text>
                            <Image source={require(getIcone(item.icon, item.direcao))}/>
                          </View>
                    </TouchableHighlight>
                )} />
            </List>
            );
    }

我在屏幕上显示了正确的字符串路径。虽然，图像崩溃：

Red Screen log

这说：调用要求预期正好1个字符串文字参数，但发现：'require（（0，_icon2.default）（item.icon，icon.direcao））' < / p>

编辑：这个问题与某些观点的其他传统源图像不同。 Image组件的属性源不适合使用动态图像路径。 React Native官方文档解释说：

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />

This answer解决了这个问题，但这是一个难以解决的问题。我有超过1000张图片，我想知道是否有更巧妙的解决方案。

调用函数以解决<img source="{}/"/>无法正常工作

0 个答案: