关于一个图片加载周期require('./xxx.png')问题



  • 最近做Demo的时候有用到图片加载,场景是一个View包含Image,

    ...
    render() {
    return (
    <TouchableWithoutFeedback onPress={onPress}>
      <View style={[styles.container, style]}>
        <Image
          source={selected ? selectedIcon : icon}
          style={styles.icon} />
        <Text style={[
            styles.title,
            selected ? selectedTitleStyle : titleStyle,]}>
          {title}
        </Text>
        {this.initBadge()}
      </View>
    </TouchableWithoutFeedback>
    );
    }
    ...
    module.export = Item;
    
    <Item
      selected={true}
      title="item1"
      icon={require('../img/home_icon_salesup.png')}
      selectedIcon={require('../img/home_icon_salesdown.png')}>
    

    这是一段抽离出来的组件的代码,通过代码能看到,Image的source是动态切换的,当通过press事件第一次改变图片时肉眼会感觉到闪烁一下才切换成预期的图片,第二次以后就没有了,给我的感觉是执行到这一行代码的时候图片会才会被加载的内存并绘制到屏幕,那么问题来了

    1、有什么方式能提前把图片加载到内存避免绘制的时候会有闪烁的出现
    2、通过require加载的图片的生命周期是什么
    3、多个require加载同一个图片,内存副本是几份
    4、如何手动释放掉内存中的图片资源
    5、有什么方式能检测图片正在使用(已经绘制到屏幕正在被占用)
    6、严重吐槽一下论坛的编辑器,好难用


  • administrators

    0.18有添加一个预加载方法,但还没正式发布
    其他几个问题我不了解

    最后一个问题,编辑器使用的是markdown语法,你这样把代码括起来即可
    0_1452743543869_QQ图片20160114115217.png



    1. 在老版本中,唯一的解决办法是将两个组件都创建好,其中一个不可见(隐藏或size为0),避免直接切换source属性。
    2. 实际上在RN中有好几级缓存,包括:磁盘缓存(对require的图片不存在磁盘缓存)、内存原始文件缓存、内存位图缓存。每级缓存都采用LRU算法控制。
    3. 最多2份,分别是原始文件、位图缓存。
    4. 暂时没有这样的接口。
    5. 暂时没有这样的接口。

登录后回复