React Native Paper 中的卡片列表答案

【问题标题】：List of Cards in React Native PaperReact Native Paper 中的卡片列表
【发布时间】：2020-09-19 20:14:43
【问题描述】：

我想在我的 React Native 应用程序中使用 react-native-paper 获得卡片的垂直列表。我将使用<Card> 组件，它是react-native-paper 的一部分。

我应该将卡片包装在 <FlatList> 或 <List> 组件中，该组件是 react-native-paper 的一部分吗？我不确定react-native-paper 中的<List> 组件到底对应什么，以及使用它在Android 和iOS 中获得更好的结果是否有益。

【问题讨论】：

标签： react-native react-native-paper

【解决方案1】：

我建议您在 Flatlist 中使用 Card，如果您想将 flatlist 用作垂直列表，则默认为 vertical 。如果要水平使用它，则需要在内部将其声明为布尔值。这是一个例子

  
    <FlatList
        data={yourData}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => <Card> ... </Card>}
     />

【讨论】：

谢谢你，我很感激你的回答，但你能告诉我为什么你推荐在react-native-paper 中使用<FlatList> 和<List> 吗？我正在尝试更多地了解<List> 组件的用途和用例。毕竟react-native-paper 和类似库的目的是帮助开发人员生成开箱即用的与 Android 和 iOS 兼容的代码。否则我们将不得不参与这两个平台的复杂细节。

【解决方案2】：

与其他类似组件相比，使用<Flatlist> 的好处只是您可以在屏幕渲染上看到的元素，因此当您滚动更多渲染时。然而像 react-native <ScrollView> 这样的其他组件一次渲染所有元素，从而降低了应用程序的性能。

我没有听说过<List> 组件，也不能说这是否适用:(

【讨论】：