仅在FlatList中呈现3个项目

Question

我想在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>
        );
      }

那么我怎么能做到这一点？         }

Answer 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>
    );
  }
}

Answer 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将强制所有内容重新呈现，因此它会显示新添加的项目。