React Native小菜鸡的踩坑排雷记录（2）

最新推荐文章于 2025-05-25 18:58:19 发布

miniWhite_2

最新推荐文章于 2025-05-25 18:58:19 发布

阅读量465

点赞数

分类专栏： javascript 前端学习

本文链接：https://blog.csdn.net/qq_32123133/article/details/103604461

版权

本文作者分享了在使用React Native开发过程中遇到的长列表、阴影效果、边框圆角、动态Circle环、页面跳转及拨打电话等常见问题的解决方案，包括LargeList组件的配置与优化、解决shadow问题、动态Circle环动画实现等，旨在帮助开发者避免踩坑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、长列表LargeList

在app应用中会出现大量的列表数据，用原生的ScrollView滑动的话，性能不高。这里我采用了react-native-largelist-v3，文档的话，可以参考这里。具体的一些组件优劣势和参数配置都有说明。这里就不细说了。
该组件主要为三个列表项目：LargeList，WaterfallList，StickyForm。

主要讲下使用LargeList过程中遇到的常见问题吧：

该的data数据源必须是两层的。第一层为section部分，第二层就是具体的元素展示了。且items这个字段名必须为items，不可改变。

list:[{
   
    items:[{
   obj},{
   obj},{
   obj},{
   obj}...]
},{
   
    items:[{
   obj},{
   obj},{
   obj},{
   obj}...]
},
....
]

每一个元素间如果有间隙的话，(比如说是：marginTop:10)这些。

renderIndexPath = ({ section, row }) => (
  return <View>
      <TouchableOpacity style={
  {margin:10}}>
          {...}
      </TouchableOpacity>
  </View>
)

LargeList默认具有{flex:1}的样式，因此要使LargeList正常工作，它的父容器必须是确定高度的，你也可以通过手动指定样式，使之正常工作
在V3中，为了最大化优化性能，减少DOM节点数量, renderInd