React native 仅呈现平面列表中的3项

我只想在

平面列表中渲染我的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>
        );
      }

导出默认类FlatListBasics扩展组件{
renderNewItem=（）=>{
//在这里做点什么
}
render（）{
返回(
{item.key}
/>
);
}

那么我如何才能做到这一点呢？
}
因此，首先在构造器中准备3项数据：

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

并呈现您的
平面列表

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

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

renderItem=（）=>{
{this.setState（{data:this.state.data.pushBack（/*您在此处的新项目*/）}
}

this.setState
将强制所有内容重新渲染，因此它将显示新添加的项。
您可以使用它来控制渲染的数据量。在您的状态中设置一个计数，然后在每次按下按钮时向其添加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>
    );
  }
}

const数据=[
{key:'Devin'}，
{键：'杰克逊'}，
{key:'James'}，
{key:'Joel'}，
{key:'约翰'}，
{key:'Jillian'}，
{键：'吉米'}，
{键：'朱莉'}，
];
类FlatListBasics扩展了组件{
建造师（道具）{
超级（道具）；
此.state={
项目名称：3
};
}
renderNewItem=（）=>{
if（this.state.itemsunt（{itemsunt:（prevState.itemsunt+1）}））；
}
}
render（）{
返回(
item.key；}
renderItem={（{item}）=>{item.key}
/>
);
}
}
这将起作用，还有一个问题，即来自后端的数据包含20项，因此我应该将前3项存储到我的state.data中，然后将state.data馈送到flatlist。按下按钮后，我调用setState向state添加更多数据。数据？@2r83正确。因此，您将接收20个项目，然后将它们存储在本地（或仅存储在某个全局变量或状态中）。然后，在每次按下时（因为您希望它发生在按下时），从服务器数据中删除第一项并将其添加到显示的数据中。考虑到我的答案中的
数据
是显示的数据，我想这就是我要寻找的，我会在测试后在我的代码中接受，谢谢