渲染图像，如Instagram中的搜索屏幕

Question

我想从数据库渲染图像，如Instagram搜索屏幕

class FeedHome extends Component {
    _renderItem = ({ item }) => <PicsContent {...item} />
    render() {
    return(
      <Root>
        <FlatList
          contentContainerStyle={{ alignSelf: 'stretch' }}
          data={data.getPosts}
          keyExtractor={item => item._id}
          renderItem={this._renderItem}
        />
     </Root>
   );
 }
}

这是图片内容功能;

function PicsContent({image}) {
  return (
    <Root>
      <PicsContentContainer>
        {image}
      </PicsContentContainer>
      <PicsContentContainer>
        {image}
      </PicsContentContainer>
      <PicsContentContainer>
        {image}
      </PicsContentContainer>
   </Root>
  )
}

我把这些代码的结果放在下面的链接中。

Answer 1

要在 Instagram 搜索等 3 列中显示平面列表项目，您可以使用属性 numColumns={3} .

你可以看到这篇文章：