React Native
Image组件
Image组件可以展示各种各样的图片，而且在React Native中该组件可以通过多种方式加载图片资源
Image组件的基本用法
1. 从当前项目中加载图片
<View style={styles.container}>
<Text>1. 从项目中加载图片</Text>
<Image source={require('./img/icon.png')} style={styles.imageStyle}></Image>
</View>
该图片资源文件的查找和JS模块相似，会根据填写的图片路径相对于当前的JS文件路径进行搜索。
2. 加载使用APP中的图片
<Text>2. 从APP资源包中加载图片</Text>
<Image source={{uri: 'bd_logo1'}} style={styles.imageStyle}></Image>
使用已经打包在APP中的图片资源(Android中的drawable和mipmap)
3. 加载来自网络的图片
<Text>3. 从网络中加载图片</Text>
<Image source={{uri: 'https://www.baidu.com/img/bd_logo1.png'}} style={{width: 526, height: 296}}></Image>
客户端的很多图片资源基本上都是实时通过网络进行获取的，写法和上面的加载本地资源的方式不太一样，这边一定需要指定图片的尺寸大小
设置图片为背景
<ImageBackground source={{uri:'https://www.baidu.com/img/bd_logo1.png'}} style={styles.imageStyle}>
<Text style={{marginTop:50,backgroundColor:'red '}}></Text>
</ImageBackground>
设置背景图片需要使用ImageBackground控件。
设置样式
imageStyle: {
width: 160,
height: 160,
resizeMode:'cover',
borderRadius: 30
}
- Image.resizeMode.cover：图片居中显示，没有被拉伸，超出部分被截断；
- Image.resizeMode.contain：容器完全容纳图片，图片等比例进拉伸；
- Image.resizeMode.stretch： 图片被拉伸适应容器大小，有可能会发生变形。
常见属性
onLayout(function)
当Image布局发生改变的，会进行调用该方法，调用的代码为:{nativeEvent: {layout: {x, y, width, height}}}.
onLoad (function)
当图片加载成功之后，回调该方法
onLoadEnd (function)
当图片加载失败回调该方法，该不会管图片加载成功还是失败
onLoadStart (fcuntion)
当图片开始加载的时候调用该方法
resizeMode
缩放比例,可选参数('cover', 'contain', 'stretch') 该当图片的尺寸超过布局的尺寸的时候，会根据设置Mode进行缩放或者裁剪图片
source{uri:string}
进行标记图片的引用，该参数可以为一个网络url地址或者一个本地的路径
样式风格属性
FlexBox 支持弹性盒子风格
Transforms 支持属性动画
backgroundColor 背景颜色
borderColor 边框颜色
borderWidth 边框宽度
borderRadius 边框圆角
overflow 设置图片尺寸超过容器可以设置显示或者隐藏('visible','hidden')
tintColor 颜色设置
opacity 设置不透明度0.0(透明)-1.0(完全不透明)
图片列表
图片列表
import React, {Component} from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';
// 导入json数据
var BadgeData = require('./BadgeData.json');
// 引入包
var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');
// 定义一些全局的变量
var cols = 3;
var boxW = 100;
var vMargin = (width - cols * boxW) / (cols + 1);
var hMargin = 25;
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
{/*返回6个包*/}
{this.renderAllBadge()}
</View>
);
}
renderAllBadge() {
// 定义一个数组(装所有的包)
var allBadge = [];
// 遍历json数据
for (var i = 0; i < BadgeData.data.length; i++) {
// 取出单独的数据对象
var badge = BadgeData.data[i];
allBadge.push(
<View key={i} style={styles.outViewStyle}>
<Image source={{uri: badge.icon}} style={styles.ImageStyle}/>
<Text style={styles.maintextStyle}>
{badge.title}
</Text>
</View>
);
}
return allBadge;
}
}
const styles = StyleSheet.create({
container: {
flexDirection:'row',
flexWrap:'wrap',
// justifyContent:"space-around",
// alignItems: 'flex-start',
backgroundColor: '#F5FCFF',
},
outViewStyle: {
width: boxW,
height: boxW,
backgroundColor:'gray',
marginLeft:vMargin,
marginTop:hMargin,
alignItems:'center'
},
ImageStyle: {
width:80,
height:80
},
maintextStyle: {
}
});
注意: 使用uri的方式加载图片的时候，不需要加图片的后缀，尤其是加载项目内的图片时。
resizeMethod
当图片的实际尺寸和容器样式不一致时，决定以怎样的策略来调整图片的尺寸默认为auto。
- auto: 使用启发式算法来在resize和scale中自动决定。
- resize: 在图片解码之前，使用软件算法对其在内存中的数据进行修改。当图片尺寸比容器尺寸大得多时，应该优先使用此选项。
- scale: 对图片进行缩放。和resize相比，scale速度更快（一般有硬件加速），而且图片质量更优。在图片尺寸比容器尺寸小或者只是稍大一点时，应该优先使用此选项。
