时间戳

首页 > 解决方案 > 如何在 React Native 的 Flatlists 中只显示一个元素

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

问题描述

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

    <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

标签： reactjsnativeselectionflatlist

解决方案

如果您没有显示列表，为什么要使用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>

推荐阅读