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

时间:2019-07-11 16:23:40

标签: javascript reactjs react-native

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

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()作为我的数据?

1 个答案:

答案 0 :(得分: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>
  );
}