flatlist上拉加载,数据多了后 部分图片显示 部分不显示,文字都会显示



  • 使用flatlist上拉加载商品,renderitem={(item)=>(
    <View>
    <Image source={{uri:item.pic}} style={{width:180,height:180}}/>
    <Text>{item.title}</Text>
    </View>
    )}
    item内容格式{title:'避孕套',pic:'https://img.alicdn.com/imgextra/i1/1962383524/TB2km1RcIrI8KJjy0FhXXbfnpXa_!!1962383524.jpg'}
    每一次上拉加载20条,上拉6-7页后后面的每页有些图片显示,有些图片不显示,有时候本页不显示,但是文字都会显示出来,也就是数据是肯定请求回来了的,排除图片地址本身问题,这个到底是什么问题啊,各种实验一天了 还是没找到解决办法



  • 正常 我这里图片多了 图片的地方还显示黑色的 图片过多还卡顿!解决不了!



  • renderitem={(item)=>( // 你确定这里没问题?renderitem={({item})=>(
      <View>
        <Image source={{uri:item.pic}} style={{width:180,height:180}}/>
        <Text>{item.title}</Text>
      </View>
    )}
    


  • @HermitCarb 既然能有部分显示 证明代码是肯定没问题的,只是我发帖是输入错误



  • @xuchao321 就真的没办法解决吗 也没看到有多少人提这个问题 难道别人没遇到这个问题



  • 如果是 Android 设备的话,很可能是由于图片太多,OOM 了。
    尝试把 Image 组件的属性 resizeMethod (android-only) 设置为 resize 。

    <Image resizeMethod="resize" />



  • 经过几天的不断尝试,问题已经完美解决,放弃了使用Flatlist

    在这个问答里面找到答案 https://github.com/facebook/react-native/issues/13413

    naqvitalha 发表的评论
    We've had lot of problems with react native listview as well so, we built one ourselves, just open sourced it. We've tested it with 5000 items works like a charm. The reason it's so fast is that it uses a quick staggered grid algorithm and recycles views (based on types) instead of destroying them once they're out of view port. Please try it out and give us feedback https://www.npmjs.com/package/recyclerlistview

    就是他这个插件完美的解决了我的问题,并且我的图片换成了这个插件https://github.com/DylanVann/react-native-fast-image,
    现在无论上拉加载多少页,图片都不会出现不显示的问题,而且不会出现滑动过快造成的白屏

    希望能帮到遇到同样问题的朋友们,RN开发路上不容易,也希望大家能为这些大神的插件多加星


登录后回复