react-native - 仅在 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>
    );
  }
}