Question

我刚刚将ListView迁移到更快的FlatList，并且目前遇到的问题是没有呈现带有外部uri的图像。如果我使用require（'localUri'），一切正常。

1）网址为https 2）我看到灰色矩形（图像的样式）被渲染 3）使用带有require（localImagePath）的本地映像正在运行 4）如果我在浏览器上请求，imageUrlThumb有效

 <FlatList
data={this.props.items}
keyExtractor={(item, index) => index}
numColumns={3}
renderItem={rowData => {
    return (
        <Image
            style={{
                width: size,
                height: size,
                margin: 2,
                borderWidth: 1,
                borderColor: "#eee"
            }}
            source={{ uri: rowData.imageUrlThumb, cache: "force-cache" }}
            resizeMode="contain"
        />
    );
}}
/>;

如果有人能帮助我，那会很好。

祝你好运凯

环境：操作系统：macOS High Sierra 10.13 节点：6.11.0 纱线：1.2.1 npm：5.4.2 守望者：4.9.0

包:(想要=＆gt;已安装）反应：16.0.0-beta.5 =＆gt; 16.0.0-beta.5 react-native：https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz =＆gt; https://github.com/expo/react-native/archive/sdk-22.0.1.tar.gz

Answer 1

在这一行：

source={{uri: rowData.imageUrlThumb, cache: 'force-cache'}}

rowData.imageUrlThumb未定义。

renderItem中有语法错误。

根据FlatList数据结构，您必须在呈现中调用rowData.item或使用renderItem={({item}) => {中的花括号来表示您将使用item rowData对象。也就是说，使用(rowData) => rowData.item或使用({item}) => item。

如果使用extern uri，则不在react-natives flatlist中呈现图像

1 个答案: