在按钮上单击将 FlatList 项替换为数组中的下一个

Question

单击按钮时，我希望 FlatList 显示数组中的下一项。

我了解按钮目前保持 “添加” 到 FlatList 而不是 “替换” 现有内容，可以不知道如何用数组中的下一个替换当前加载的项目。

例如，如果当前加载的是“John Doe1”，则单击按钮时它应该更改为“John Doe2”。

如果有人能为我指明正确的方向以实现这一点，我将不胜感激？

这是我到目前为止所做的。

import React, { useState } from 'react';
import { View, Text, StyleSheet, FlatList, Button } from 'react-native';
const Showme = () => {
    const [display, setDisplay] = useState(1);

    const managedList = [
        {name : "John Doe1"},
        {name : "John Doe2"},
        {name : "John Doe3"},
        {name : "John Doe4"},
        {name : "John Doe5"},
        {name : "John Doe12"},
        {name : "John Doe13"},
        {name : "John Doe14"},
        {name : "John Doe15"}

    ];
    return(
        <View style={{ flex: 1}}>
        <FlatList
            data={managedList.slice(managedList, display)}
            keyExtractor={ mohan => mohan.name}
            renderItem={({ item }) => {
                return <Text style={styles.menuStyle}>{item.name}</Text>
            }}
        />

        <Button 
            title="Show Next"
            onPress={() => {
                setDisplay(display + 1);
            }}
        />
        </View>
    );
};
const styles = StyleSheet.create({
    menuStyle:{
        borderWidth: 1,
        padding: 40,
        flex: 1
    }
})
export default Showme;

Answer 1

将您的 flastlist 更改为此，

<FlatList
  data={managedList.slice(display - 1, display)}
  keyExtractor={ mohan => mohan.name}
  renderItem={({ item }) => {
    return <Text style={styles.menuStyle}>{item.name}</Text>
  }}
/>

您的切片从索引 0 开始，即索引 0 到您添加到它的任何值。

在按钮上单击将 FlatList 项替换为数组中的下一个

On Button click replace FlatList item to the next in the array

react-native

react-native-flatlist