【问题标题】: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> 组件到底对应什么,以及使用它在AndroidiOS 中获得更好的结果是否有益。

【问题讨论】:

    标签: 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 中使用&lt;FlatList&gt;&lt;List&gt; 吗?我正在尝试更多地了解&lt;List&gt; 组件的用途和用例。毕竟react-native-paper 和类似库的目的是帮助开发人员生成开箱即用的与 Android 和 iOS 兼容的代码。否则我们将不得不参与这两个平台的复杂细节。
    【解决方案2】:

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

    我没有听说过&lt;List&gt; 组件,也不能说这是否适用:(

    【讨论】:

      猜你喜欢
      • 2021-01-30
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-05-21
      • 2020-11-21
      相关资源
      最近更新 更多