移动跨平台框架ReactNative图片组件Image【10】

2024-04-21 01:24:21

前端江太公

React Native，是一个混合移动应用开发框架，是目前流行的跨平台移动应用开发框架之一。React Native 采用不同的方法进行混合移动应用开发。它不会生成原生 UI 组件，而是基于 React，React Native
是一个用于构建基于 Web 的交互界面的 JavaScript 库，因此会有更丰富的 UI 体验效果，同时也能够很好地调用底层框架的UI使用。

React Native系列导航
01-React Native 基础教程
02-安装ReactNative
03-ReactNative目录结构
04-ReactNative视图View
05-ReactNative组件样式style
06-ReactNative文本组件Text
07-ReactNative组件状态state
08-ReactNative组件属性props
09-ReactNative输入组件TextInput
10-ReactNative图片组件Image
11-ReactNative活动指示器组件
12-ReactNative弹出框Alert
13-ReactNative存储数据组件AsyncStorage
14-ReactNative动画组件Animated
15-ReactNative开关组件Switch
16-状态栏组件StatusBar
17-ReactNative滚动视图ScrollView
18-ReactNative选择器Picker
19-ReactNative网络请求

React Native 图片组件 Image

原生 iOS 使用 UIImage 来显示一张图片，原生 Android 开发使用 ImageView 来显示图片。

React Native 对 UIImage 和 ImageView 进行封装，提供了 Image 组件用来显示图片。

Image 组件还同时解决了访问网络图片复杂的问题，把显示网络图片给简化了。

React Native 图片组件 Image

React Native 内建了图片组件 Image 来显示图片，这个组件既可以显示本地图片，也可以显示网络图片，还可以显示 base64 格式的图片。

引入组件

使用 Image 组件首先需要引入此组件，引入组件语法和引入其它组件的语法相同

import { Image } from 'react-native'

使用组件

Image 组件的基本使用语法如下

<Image style  = {image_style}source = {image_url} resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>

Image 组件既可以显示本地图片也可以显示网络图片，但它们的语法格式有点不同。

显示本地图片的语法格式为

<Image style  = {image_style}source = {require('./image_path')} resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>

显示网络图片的语法格式为

<Image style  = {image_style}source={{uri: 'image_url'}resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>

显示 base64 格式的图片的语法格式为

<Image style  = {image_style}source={{uri: 'uri: data:image/png;base64,[image_base64_data]'}resizeMode = {"cover"|"contain"|"stretch"|"repeat"|"center"}
/>

注意：显示网络图片和显示 base64 格式的图片，style 样式中一定要包含 width 和 height 属性。

使用范例如下

显示本地图片

<Imagesource={require('/react-native/img/favicon.png')}
/>

显示网络图片

<Imagestyle={{width: 50, height: 50}}source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>

显示 base64 格式图片

<Imagestyle={{width: 66, height: 58}}source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
/>

属性

Image 组件有很多属性，但常用的且跨平台的属性真心不多，我们列举几个常用的介绍下。

style 属性。

除了默认的跟 相同的属性外， 中的 style 属性还支持一下属性

属性	类型	说明
borderTopRightRadius	number	设置右上角的圆角度数，默认值为 0
borderBottomLeftRadius	number	设置左下角的圆角度数，默认值为 0
borderBottomRightRadius	number	设置右下角的圆角度数，默认值为 0
borderTopLeftRadius	number	设置左上角的圆角度数，默认值为 0
borderRadius	number	统一设置四个角的圆角度数，默认值为 0
borderColor	color	设置边框的颜色
borderWidth	number	设置边框的宽度，默认值为 0
backgroundColor	color	设置图片组件的背景色
opacity	number	设置图片组件的透明度
overflow	string	当组件超出屏幕宽高时是否可见， ‘visible’ 显示, ‘hidden’ 隐藏
backfaceVisibility	string	定义当组件不面向屏幕时是否可见， ‘visible’ 显示, ‘hidden’ 隐藏
tintColor	color	将所有非透明的图片像素改为此颜色
resizeMode	string	设置图片如何适应图片容器，可选的值有： ‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’

source 属性。

source 属性用于设置图片的地址，图片地址可以是本地图片，网络图片和 base64 格式的图片。

使用方式我们上面已经介绍过了。
loadingIndicatorSource 属性。

loadingIndicatorSource 属性用于加载网络图片时的 placeholder 图片。也可以说是图片加载指示器。

它的使用格式和 source 属性一样，但不能是网络图片，只能是本地图片或 base64 格式图片。

resizeMethod 属性。

resizeMethod 属性用于设置图片如何适配图片组件。默认值为 auto。

可选的值有： ‘cover’, ‘contain’, ‘stretch’, ‘repeat’, ‘center’。

值	说明
auto	由系统自己在 `resize` 或 `scale` 之间选择
resize	显示之前先进行重新调整大小，当图片超出组件太多的时间建议使用此值
scale	缩放图片，当地图片比组件小或者图片和组件差不多大小时使用此值

范例 1

下面的代码，我们使用 Image 组件分别显示本地图片、网络图片和 base64 图片。

你需要将下面的图片下载到项目的根目录下

App.js

import React, { Component } from 'react';
import { AppRegistry, View, Image } from 'react-native';export default class App extends Component {render() {return (<View><Imagesource={require('./img1.jpg')}/><Imagestyle={{margin:10,width: 177, height: 100}}source={{uri: 'https://www.twle.cn/static/i/img1.jpg'}}/><Imagestyle={{margin:10,width: 66, height: 58}}source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}/></View>);}
}

显示效果如下

移动跨平台框架ReactNative图片组件Image【10】相关推荐

移动跨平台ReactNative动画组件Animated【14】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
移动跨平台ReactNative开关组件Switch【15】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
移动跨平台框架React Native状态栏组件StatusBar【16】
前端江太公 React Native,是一个混合移动应用开发框架,是目前流行的跨平台移动应用开发框架之一.React Native 采用不同的方法进行混合移动应用开发.它不会生成原生 UI 组件,而是 ...
ReactNative简介、开发环境、调试、常用组件、useState状态、FlatList组件、SectionList组件、Platform 模块、定义样式、图片组件、触摸事件、打包apk发布版
ReactNative简介: ReactNative是基于React语法来进行开发移动app的框架: ReactNative中提供了移动端专用的一些组件,我们要使用ReactNative固有的组件代替 ...
关于.NET框架的主要组件 10:45:02
关于.NET框架的主要组件 10:45:02 为什么需要.NET框架面向对向编程强大的web支持 web服务平板应用 soa,云计算 .net程序 .NET框架主要组件公共语言运行时 CLR ...
Flutter学习笔记（10）--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
跨平台打造移动原生应用的10大武器
编译工具对开发者的影响是直观的,开发者使用JavaScript等语言写出应用的代码,再将它们编译成原生代码.通过原生的API,完成跨平台的操作,最终分发到本地的应用商店中.由此可见,编译工具的选择可以 ...
ReactNative ViewPageAndroid组件详解
源码传送门在我们开发Android的时候,ViewPage这个控件的使用频率还是很高的,最简单的就是制作引导页,应用程序的主界面等,在ReactNative开发中实现该功能的组件是ViewPageA ...
燃烧我的卡路里 ---- Flutter瘦内存瘦包之图片组件
作者:闲鱼技术-炉军背景在电商类APP里,图片到现在为止仍然是最重要的信息承载媒介,不得不说逛淘宝的过程,其实就是一个看图片的过程.而商品详情页中的图片,通常是页面中内存占用最多的内容,占用了整个 ...

最新文章

热门文章