基础篇章:React Native之 Image 的讲解
时间:2022-04-28
本文章向大家介绍基础篇章:React Native之 Image 的讲解,主要内容包括属性、Image的style、例子实践、例子代码、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)
今天一起来学习一些Image这个组件,它其实就是相当于我们android控件中的ImageView。
我们先看例子,看看加载本地图片和远程服务器图片的方式,其实差不多。
import React, { Component } from 'react';
import { AppRegistry, View, Image } from 'react-native';
class DisplayAnImage extends Component {
render() {
return (
<View>
<Image
source={require('./img/favicon.png')}
/>
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}
/>
</View>
);
}
}
第一个就是直接在source里写相对路径,第二个就是直接写图片的服务器地址即可。
当然它也支持在android中显 示GIF 和 WebP 图片,方式如下:
- 在android/app/build.gradle中依赖下列开源库 dependencies { // If your app supports Android versions before Ice Cream Sandwich (API level 14) compile 'com.facebook.fresco:animated-base-support:0.11.0' // For animated GIF support compile 'com.facebook.fresco:animated-gif:0.11.0' // For WebP support, including animated WebP compile 'com.facebook.fresco:animated-webp:0.11.0' compile 'com.facebook.fresco:webpsupport:0.11.0' // For WebP support, without animations compile 'com.facebook.fresco:webpsupport:0.11.0' }
- 在proguard-rules.pro中配置防混淆 -keep class com.facebook.imagepipeline.animated.factory.AnimatedFactoryImpl { public AnimatedFactoryImpl(com.facebook.imagepipeline.bitmaps.PlatformBitmapFactory, com.facebook.imagepipeline.core.ExecutorSupplier); }
属性
- 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(相对路径)来引用)。
Image的style
- backfaceVisibility ['visible', 'hidden'] 隐藏或者显示
- backgroundColor color 背景色
- borderBottomLeftRadius 左下角圆角大小
- borderBottomRightRadius
- borderColor color 边框颜色
- borderRadius 边框圆角
- borderTopLeftRadius
- borderTopRightRadius
- borderWidth number 边框宽度
- opacity 设置透明度
- overflow ['visible', 'hidden'] 设置图片尺寸超过容器可以设置显示或者隐藏
- resizeMode 图片调整模式
- tintColor color 颜色设置
- overlayColor 当图片圆角显示时,剩余空间设置的颜色,android独有
例子实践
看看我模仿的QQ上的一个页面,漂不漂亮?说实话,敲代码这个东西,还得实践,看看这个效果,通过这几篇简单的学习,你能实现吗?
效果图
例子代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
class ImageDemo extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.title_view}>
<Text style={styles.title_text}>
空间动态
</Text>
</View>
<View style={styles.three_image_view}>
<View style={styles.vertical_view}>
<Image source={require('./img/igs.png')} style={{alignSelf:'center',width:45,height:45}} />
<Text style={styles.top_text}>
好友动态
</Text>
</View>
<View style={styles.vertical_view}>
<Image source={require('./img/eqc.png')} style={{alignSelf:'center',width:45,height:45}}/>
<Text style={styles.top_text}>
附近
</Text>
</View>
<View style={styles.vertical_view}>
<Image source={require('./img/iei.png')} style={{alignSelf:'center',width:45,height:45}}/>
<Text style={styles.top_text} >
兴趣部落
</Text>
</View>
</View>
<View style={{height:30,backgroundColor:'#f9f9fb'}}/>
<View style={styles.rectangle_view}>
<View style={{flexDirection:'row',alignItems: 'center'}}>
<Image source={require('./img/nsa.png')} style={{alignSelf:'center',width:30,height:30}}/>
<Text style={styles.rectangle_text} >
羽毛球
</Text>
</View>
<Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
</View>
<View style={styles.rectangle_view}>
<View style={{flexDirection:'row',alignItems: 'center'}}>
<Image source={require('./img/nsb.png')} style={{alignSelf:'center',width:30,height:30}}/>
<Text style={styles.rectangle_text} >
火车票
</Text>
</View>
<Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
</View>
<View style={styles.rectangle_view}>
<View style={{flexDirection:'row',alignItems: 'center'}}>
<Image source={require('./img/nrz.png')} style={{alignSelf:'center',width:30,height:30}}/>
<Text style={styles.rectangle_text} >
视频
</Text>
</View>
<Image source={require('./img/ppe.png')} style={{alignSelf:'center',width:20,height:20}}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
title_view:{
flexDirection:'row',
height:50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text:{
color:'white',
fontSize:20,
textAlign:'center'
},
three_image_view:{
paddingTop: 15,
flexDirection:'row',
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor:'white',
},
vertical_view:{
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'white',
paddingBottom:15,
},
top_text:{
marginTop:5,
color:'black',
fontSize:16,
textAlign:'center'
},
rectangle_view:{
paddingTop:8,
paddingBottom:8,
paddingLeft:15,
paddingRight:15,
flexDirection:'row',
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor:'white',
borderBottomColor:'#dedfe0',
borderBottomWidth:1,
},
rectangle_text:{
color:'black',
fontSize:16,
textAlign:'center',
paddingLeft:8,
},
});
AppRegistry.registerComponent('ImageDemo', () => ImageDemo);
最后我想说,不懂的可以留言,或者去我的微信公众号下面留言,评论,一起交流学习。我的微信公众号:非著名程序员。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 这样的奇技淫巧,劝你不用也罢
- 一文详解设备ID的那些事儿
- Ansible搭建hadoop-3.1.3高可用
- Android | xml和view的那些事
- Android | Glide细枝篇
- 从源代码编译安装 MonoDevelop 记录
- 在 Asp.Net Core WebAPI 中防御跨站请求伪造攻击
- Hash 算法有哪些?
- Cordova 运行 Web 应用
- SSH 端口转发小结
- Hive实现自增序列及元数据问题
- 手工将项目升级至 Angular 9 记录
- 备份和恢复 timescaledb 的超级表 (hypertables)
- CVE-2020-14644 weblogic iiop反序列化漏洞
- Ubuntu 17.10 安装折腾记录