如何在React Native中限制FlatList仅显示12条数据？

嘿，这事儿很好解决，我给你两种靠谱的方法，你可以根据自己的实际需求来选：

方案一：获取数据时直接截取前12条（推荐无需保留完整数据的场景） #

这种方法会在拿到接口返回的数据后，直接只把前12条存入组件状态，后续FlatList直接使用处理好的数据即可，能节省一点内存开销。

修改你的componentDidMount方法：

componentDidMount() {
  return fetch(ConfigApp.URL+'json/data_posts.php')
    .then((response) => response.json())
    .then((responseJson) => {
      // 截取数组前12条数据
      const limitedPosts = responseJson.slice(0, 12);
      this.setState({ isLoading: false, dataPosts: limitedPosts })
    })
}

你的render方法保持原样就可以了。

方案二：在FlatList的data属性中动态截取（适合需要保留完整数据的场景） #

如果你之后打算做加载更多的功能，需要把所有帖子数据存在状态里备用，那可以直接在FlatList的data参数里做截取：

修改你的render方法里的FlatList部分：

render() {
  return (
    <FlatList
      // 直接在这里截取前12条数据渲染
      data={ this.state.dataPosts.slice(0, 12) }
      renderItem={({item}) => <Image source={{uri: ConfigApp.IMAGESFOLDER+item.post_image}}/>}
      keyExtractor={(item, index) => index}
    />
  )
}

这种方式下，你的componentDidMount不用修改，组件状态里会保留接口返回的所有帖子数据，方便后续功能扩展。

内容的提问来源于stack exchange，提问作者bdroid