ReactNative中Image组件加载方式

Image组件加载方式

从当前项目中加载

• 图片资源文件的查找和JS模块相似，会根据填写的图片路径相对于当前的js文件路径进行搜索。
• React Naive的Packager会根据平台选择相应的文件，例如:my_icon.ios.png和my_icon.android.png两个文件(命名方式android或者ios)，会分别根据android或者ios平台选择相应的文件。
• Packager会打包所有的图片并且依据屏幕精度提供对应的资源。譬如说，iPhone 5s会使用[email protected]，而Nexus 5上则会使用[email protected]。如果没有图片恰好满足屏幕分辨率，则会自动选中最接近的一个图片。
• 注意：如果你添加图片的时候packager正在运行，可能需要重启packager以便能正确引入新添加的图片。
• 这样处理的优势：
  
  • iOS和Android一致的文件系统。
  • 图片和JS代码处在相同的文件夹，这样组件就可以包含自己所用的图片而不用单独去设置。
  • 不需要全局命名。你不用再担心图片名字的冲突问题了。
  • 只有实际被用到（即被require）的图片才会被打包到你的app。
  • 与访问网络图片相比，Packager可以得知图片大小了，不需要在代码里再声明一遍尺寸。
  • 现在通过npm来分发组件或库可以包含图片了。
  • 注意：为了使新的图片资源机制正常工作，require中的图片名字必须是一个静态字符串（不能使用变量！因为require是在编译时期执行，而非运行时期执行！）。

export default class App5 extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
         <Image source={require('./image/NO.png')} style={{width: 120, height: 120}}  />
      </View>
    );
  }
}

加载使用APP中的图片

如果你在编写一个混合App（一部分UI使用React Native，而另一部分使用平台原生代码），也可以使用已经打包到App中的图片资源（以拖拽的方式放置在Xcode的asset类目中，或是放置在Android的drawable目录里）。注意此时只使用文件名，不带路径也不带后缀

• 在iOS中

<View style={styles.container}>
         <Image source={{uri: 'BG1'}} style={{width: 120, height: 120}} />
      </View>

• 在Android中

 <View style={styles.container}>
         <Image source={{uri: 'asset:/BG1.png'}} style={{width: 40, height: 40}} />
      </View>

加载来自网络的图片

• 客户端的很多图片资源基本上都是实时通过网络进行获取的，但是需要指定图片的尺寸大小

• 强烈建议你使用https以满足iOS App Transport Security 的要求

• 关于resizeMode属性

  • Image.resizeMode.cover：图片居中显示，没有被拉伸，超出部分被截断
  • Image.resizeMode.contain：容器完全容纳图片，图片等比例进拉伸
  • Image.resizeMode.stretch： 图片被拉伸适应容器大小，有可能会发生变形

<View style={styles.container}>
         <Image source={{uri:'https://www.baidu.com/img/bd_logo1.png'}}style={{width:100, height:100, resizeMode: Image.resizeMode.contain}}/>
      </View>

设置背景图片

<View style={styles.container}>
         <ImageBackground source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={{marginTop:20,
    marginLeft:20,flex:1,width:200, height:100,}}>
           <Text style={{marginTop: 60, backgroundColor: 'red'}}>下面是背景图片</Text>
        </ImageBackground>
      </View>

效果：

Image组件的常见属性

• onLayout(function)
  当Image布局发生改变的，会进行调用该方法，调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}.

• onLoad (function)
  当图片加载成功之后，回调该方法

• onLoadEnd (function)
  当图片加载失败回调该方法，该不会管图片加载成功还是失败
• onLoadStart (fcuntion)
  当图片开始加载的时候调用该方法
• resizeMode
  缩放比例,可选参数(‘cover’, ‘contain’, ‘stretch’) 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片
• source{uri:string}
  进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径

Image组件的样式风格属性

• FlexBox 支持弹性盒子风格
• Transforms 支持属性动画
• backgroundColor 背景颜色
• borderColor 边框颜色
• borderWidth 边框宽度
• borderRadius 边框圆角
• overflow 设置图片尺寸超过容器可以设置显示或者隐藏(‘visible’,’hidden’)
• tintColor 颜色设置
• opacity 设置不透明度0.0(透明)-1.0(完全不透明)