美文网首页iOS备忘录React Native开发经验集react-native开发
React-Native中Image请求网络图片时占位图的设置

React-Native中Image请求网络图片时占位图的设置

作者: 昵称你也抢我的 | 来源:发表于2016-10-16 23:14 被阅读3658次

    其实做开发的这段时间,一直在学习研究,总结了很多东西,但是没写过文章,最近刚开始接触React-Native,在关于网络图片的占位图设置时遇到了点麻烦,也没搜到个结果,就自己捣腾了,有以下可行办法。

    首先说一下原理,我发现Image组件上在渲染绘制图像时,如果当前Image上已经有一张绘制好的图像了,在重新加载另一张新图像时,如果新图像还没有完全加载绘制好,还是会先显示之前的图像。那么,事情就变得简单了

    情况一:需要显示的图片的URL链接需要先从网络获取,然后再加载到Image组件中:


    情况一(1)

    这种情况很简单,只需要一个三目运算就可以了,看起来比较清晰。当然,你可以直接在初始化state的时候把图片的url设置成占位图,然后source的uri直接适用state中的url就可以了 ,看起来更简单。如下:

    情况一(1)

    情况二:需要显示的图片的URL链接已经确定知道或者是通过props中传递的:

    这种情况下我们是确定知道图片的URL的 没有从网络中获取的步骤,也就是上面那个例子中一开始的state中的imageURL是已知的。这个时候就不能像上面那么写了。

    情况二

    原理就是我上面说的那样,读者可以自己看情况。第一次写文章,一直不愿意写是因为太耗时间了(毕竟忙着混饭吃),特别是复杂的东西。这篇文章没有什么技术含量,但是希望能对一些人有点帮助,谢谢。

    相关文章

      网友评论

      • fba0f7a00e6a:如果是长列表,这个方法还可以用么?
      • 萝卜丝巾:image组件自带defaultSource 属性,不必要这么麻烦
        52ee564f818b:@萝卜丝巾您好,你用的第三方包 是哪个啊
        萝卜丝巾:@隆那个隆_81d0 我用的第三方的e
        隆那个隆0330:自带defaultSource 只支持ios呀 ,android的小伙伴肿么办呀。。
      • real阿苏勒:如果网络图片加载错误,怎么显示默认本地图片
      • tom_aac3:想问一下,占位图,如果是本地的图片,你是怎么设置的?
        5ec1da87f063:{
        rowData.url == null ?
        <Image source= {require('./屏幕快照 2017-05-26 下午4.31.49.png')} style={{width:400,height:400}}/>
        :
        <Image source= {{uri:rowData.url}} style={{width:400,height:400}}/>
        }
      • solozyx:这方面的资料还是太少了
      • solozyx:兄弟 加我个微信吧 solozyx ,一起讨论RN的问题
        昵称你也抢我的:@solozyx 我也就随便写了几天的RN看看,最近忙,没写了:joy:
      • solozyx:用到了

      本文标题:React-Native中Image请求网络图片时占位图的设置

      本文链接:https://www.haomeiwen.com/subject/nnjayttx.html