仅在 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

所以首先在构造函数中准备 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 将强制重新呈现所有内容，因此它将显示新添加的项目。

Answer 2

您可以使用 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>
    );
  }
}

仅在 FlatList 中渲染 3 个项目

Only rendering 3 items inside FlatList

react-native

react-native-flatlist