Question

现在在我的本机应用程序中，我可以要求提供本地图像，并且缩略图在网格中的排列很好。

render() {
      return (

         <View style={styles.grid}>
            <FlatList    
              data={[
                require("./app_thumbnails/p03zbzlm.jpg"),
                require("./app_thumbnails/jwc-small.jpg"),
                require("./app_thumbnails/digital-music.jpg")
              ]}

          />
         </View>
      );
 }

我如何使用uri（例如： “ https://randomuser.me/api/portraits/thumb/men/42.jpg”）而不是require（）作为我的数据？

Answer 1

这应该可行，尽管您可能需要调整Image的样式等

render() {
    return (
       <View style={styles.grid}>
         <FlatList    
           data={[{uri:'html://image.source.one/image.png'}, 
                 {uri:'html://image.source.two/image2.png'},
                 {uri:'html://image.source.three/image3.png'}
            ]}
            renderItem={({item})=><Image source={{uri: item.uri}}}
      />
     </View>
  );
}

我可以从FlatList中的URI渲染图像吗

1 个答案: