仅在 FlatList 中渲染 3 个项目答案

【问题标题】：Only rendering 3 items inside FlatList仅在 FlatList 中渲染 3 个项目
【发布时间】：2017-10-27 18:35:56
【问题描述】：

我只想在 FlatList 中呈现我的 3 个项目。稍后当我单击文本时，将呈现新项目。

这里是示例代码：

export default class FlatListBasics extends Component {
renderNewItem = () => {
// do something here
}
      render() {
        return (
          <View style={styles.container}>
            <FlatList
              data={[
                {key: 'Devin'},
                {key: 'Jackson'},
                {key: 'James'},
                {key: 'Joel'},
                {key: 'John'},
                {key: 'Jillian'},
                {key: 'Jimmy'},
                {key: 'Julie'},
              ]}
              renderItem={({item}) => <Text onPress={this.renderNewItem}>{item.key}</Text>}
            />
          </View>
        );
      }

那么我该如何实现呢？ }

【问题讨论】：

标签： react-native react-native-flatlist

【解决方案1】：

您可以使用Array.prototype.slice() 来控制呈现的数据量。在您的状态中设置一个计数，然后每次按下按钮时将其加 1。这样，您就不必依赖于如何加载数据。您可以使用本地数据源，也可以使用带有 API 的远程数据源。另一个关键点是添加一个keyExtractor，这样重新渲染的性能会更好。

示例

const data = [
  {key: 'Devin'},
  {key: 'Jackson'},
  {key: 'James'},
  {key: 'Joel'},
  {key: 'John'},
  {key: 'Jillian'},
  {key: 'Jimmy'},
  {key: 'Julie'},
];
class FlatListBasics extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemsCount: 3 
    };
  }
  renderNewItem = () => {
    if (this.state.itemsCount < data.length) {
      this.setState((prevState) => ({ itemsCount: (prevState.itemsCount + 1) }));
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={data.slice(0, this.state.itemsCount)}
          keyExtractor={(item, index) => item.key;}
          renderItem={({ item }) => <Text onPress={this.renderNewItem}>{item.key}</Text>}
        />
      </View>
    );
  }
}

【讨论】：

我想这就是我要找的东西，我会在我的代码中测试后接受，谢谢

【解决方案2】：

所以首先在你的构造函数中准备你的 3 项数据：

let state = {
    data = [{key: "Devin"}, {key: "Jackson"}, {key: "James"}]
}

并呈现您的FlatList。

然后，在renderItem 中，您将拥有一个onPress，它将向您的data 添加一个项目

renderItem = () => {
    <TouchableOpacity onPress=() => { this.setState({data: this.state.data.pushBack(/*your new item here*/)}) }
    </TouchableOpacity>
}

this.setState 将强制所有内容重新渲染，因此它将显示新添加的项目。

【讨论】：

这行得通，还有 1 个问题，说来自后端的数据有 20 个项目，所以我应该将前 3 个项目存储到我的 state.data 中，然后将 state.data 提供给 flatlist。按下按钮后，我调用 setState 向 state.data 添加更多数据？
@2r83 正确。因此，您收到 20 个项目，然后将它们存储在本地（或仅存储在某个全局变量或状态中）。然后，在每次按下时（因为您希望它在按下时发生），您从服务器数据中删除第一项并将其添加到显示的数据中。考虑到我的答案中的data 是显示的数据