React Native 基础组件之 Image

Z时代
2024-01-10
分类：综合

react

用于显示多种不同类型图片的 React 组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等。

属性

name	type	desc
onLayout	function	布局发生变化时调用，参数为：{nativeEvent: {layout: {x, y, width, height}}}.
onLoad	function	图片加载成功时回调该方法。
onLoadEnd	function	加载结束后，不管成功与否，都回调该方法。
onLoadStart	function	顾名思义，加载开始时调用。
resizeMode	enum(‘cover’, ‘contain’, ‘stretch’)	决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。
source	{uri: string}	uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)来引用）。

Style

name	value	desc
backfaceVisibility	[‘visible’, ‘hidden’]	隐藏或者显示
backgroundColor	color	背景色
borderBottomLeftRadius	number	左下角圆角大小
borderBottomRightRadius	number	右下角圆角大小
borderColor	color	边框颜色
borderRadius	number	边框圆角
borderTopLeftRadius	number	左上角圆角大小
borderTopRightRadius	number	右下角圆角大小
borderWidth	number	边框宽度
opacity	[0.0-1.0]	设置透明度
overflow	[‘visible’, ‘hidden’]	设置图片尺寸超过容器可以设置显示或者隐藏
tintColor	color	颜色设置
overlayColor	color	当图片圆角显示时，剩余空间设置的颜色，android独有
resizeMode	enum(‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’)	设置缩放模式

实例

1.加载本地图片和加载网络图片

代码：

import React, {Component} from 'react';
import {StyleSheet, Image, View,Text} from 'react-native';
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          source = {require('./img/cat.png')}
        />
        <Text>这是本地图片</Text>
        <Image 
          style = {styles.image}
          source = {{uri:'http://lookcode-wordpress.stor.sinaapp.com/uploads/2016/01/qrcode_for_gh_c6208faa1f42_430.jpg'}}
        />
        <Text>这是网络图片</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  image: {
    height: 50,
    width: 50
  }
});