如何在 React Native 的 Flatlists 中只显示一个元素

编程问答 2022-04-29

问题描述

有没有办法只显示平面列表中的一个元素？

    <FlatList
                style={styles.flatList}
                data={WorkoutList}
                keyExtractor={(item) => item.id}
                renderItem={({ item }) =>
                    <View style={styles.card}>
                        <Text>item.name</Text>
                    </View>}
            />

此代码将显示所有名称。 我可以只显示位置“i”的名字，然后用按钮增加“i”以查看下一个直到最后？

所以代替：

Mark
Luke
Paul

我想要类似的东西：

Mark
NEXTBUTTON

当我按下下一步

Luke
NEXTBUTTON

解决方法

如果您没有显示列表，为什么要使用 FlatList。 您需要一个状态来跟踪要显示的索引并仅显示该索引的数据。

const [index,setIndex] = useState(0);
const showNextIndex = () => {
  if(index < workoutList.length)
    useState(index + 1);
}
...
<Text>{workoutList[index].name}</Tex>
<Button onPress={showNextIndex}>Next</Button>
flatlistnativenativenativereactjsreactjsreactjsreactjsselection