移动跨平台框架ReactNative图片组件Image【10】_react image auto-程序员宅基地

技术标签: # React Native  前端  reactnative  javascript  

在这里插入图片描述
前端江太公


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 对 UIImageImageView 进行封装,提供了 Image 组件用来显示图片。

img

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 样式中一定要包含 widthheight 属性。

使用范例如下

显示本地图片

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

显示网络图片

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

显示 base64 格式图片

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

属性

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

  1. 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’
  2. source 属性。

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

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

  3. loadingIndicatorSource 属性。

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

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

  4. resizeMethod 属性。

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

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

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

范例 1

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

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

img

App.js
import React, {
     Component } from 'react';
import {
     AppRegistry, View, Image } from 'react-native';

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

显示效果如下

React Native 图片组件 Image

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ZiChen_Jiang/article/details/124140095

智能推荐

bootstrap和elementUI冲突解决_boostrap 与 electron 冲突-程序员宅基地

文章浏览阅读7.4k次,点赞4次,收藏7次。问题描述:bootstrap引入VUE+elementUI项目里,由于bootstrap的全局性,全局的样式就被修改。el-upload这个组件里,控制上传文件类型的功能是用input元素完成的,element-UI默认将input屏蔽掉,不显示到页面中。但是引入了bootstrap就会将input的样式显示出来。造成的后果如图:为了解决这个问题:可以在当前页面中写入全局的样式,代码如下:..._boostrap 与 electron 冲突

android 规定一行显示多少字符,android计算textview一行能显示多少个字-程序员宅基地

文章浏览阅读2.2k次。第一次发博客 不喜勿喷项目有一个需求,显示文字的时候,如果字数超过两行,则显示省略号,然后在后面显示标红的“更多”(如下图所示) 我打算用混合文本SpannableString去完成,这样的话就得知道textview的每行要显示多少个字。然而不同的手机屏幕分辨率显示字数会有所不同,我的做法如下:首先获取到目标TextView的宽度,如果TextView的宽度是match_parent,那么就是屏幕..._android根据手机屏幕宽度判断每行显示字数

Unity AssetBundle 之 (进阶)简单的实现 AssetBundle 资源下载,资源包的资源加载与释放管理等操作的方法_unity bundle进阶-程序员宅基地

文章浏览阅读1.4k次,点赞2次,收藏4次。Unity AssetBundle 之 (进阶)简单的实现 AssetBundle 资源下载,资源包的资源加载与释放管理等操作的方法目录Unity AssetBundle 之 (进阶)简单的实现 AssetBundle 资源下载,资源包的资源加载与释放管理等操作的方法一、简单介绍二、实现原理三、注意事项四、效果预览五、实现步骤六、关键代码一、简单介绍Unity中的一些基础知识点。本节介绍,Asset Bundle 在 Unity中的使用..._unity bundle进阶

centOS6.5下yum安装nginx1.10.2_如何yum安装nginx1.10.2缓存模块-程序员宅基地

文章浏览阅读1.5k次。cat > /etc/yum.repos.d/nginx.repo <

Dataway让SpringBoot不在需要Controller、Service、DAO等了,绝_springboot dataway-程序员宅基地

文章浏览阅读359次。推荐阅读:面经蚂蚁金服(交叉面),已拿offer,Java岗定级阿里P6实战文档:彻底搞懂SpringBoot+微服务+Nginx+Docker等Dataway介绍Dataway 是基于 DataQL 服务聚合能力,为应用提供的一个接口配置工具。使得使用者无需开发任何代码就配置一个满足需求的接口。整个接口配置、测试、冒烟、发布。一站式都通过 Dataway 提供的 UI 界面完成。UI 会以 Jar 包方式提供并集成到应用中并和应用共享同一个 http 端口,应用无需单独为 Dataway_springboot dataway

脉冲编码调制(PCM)-程序员宅基地

文章浏览阅读6.2k次,点赞2次,收藏14次。称为PCM(pulse code modulation),即脉冲编码调制。 数字信号是对连续变化的模拟信号进行抽样,量化和编码产生的,这种电的数字信号称为数字基带信号,由PCM电端机产生。 简单说就是模/数转换。模拟信号经过抽样和量化以后,可以得到一系列输出,它们共有Q个电平状态。当Q比较大时,如果直接传输Q进制的信号,其抗噪声性能将会是很差的,因此,通常在发射端通过编码器把Q进制信号变换..._生成二进制的代码是脉冲信号吗

随便推点

实习(光条中心提取,灰度重心法)_灰度重心法提取中心线matlab-程序员宅基地

文章浏览阅读4.6k次,点赞2次,收藏34次。我的目的就是将matlab中代码还原成opencv中的代码了该方法的主要原理是:在图像中的每一行求得最大值,然后减去一个阈值。 在循环判断每一行中大于刚才减去的值。 在用灰度重心法提取;#include <opencv2/ope..._灰度重心法提取中心线matlab

接口与监听器_接口监听-程序员宅基地

文章浏览阅读363次。接口与监听器从一个很简单的ui界面来写解释接与监听器接口机制从一个很简单的ui界面来写解释接与监听器接口机制这次不抄概念了简单的说java不支持多类继承 很麻烦 所以有了接口这个功能.我定义一个接口,给接口放入一些归属于这个接口的功能.然后在类中通过一些定义这个接口 来实现我想实现的功能举个例子:interface Animal { public void eat(); public void travel();}public class MammalInt impleme_接口监听

php 缩略图插件,ZblogPHP SF的缩略图插件阿帕奇服务器(.htaccess)的缩略图实现伪静态...-程序员宅基地

文章浏览阅读55次。最近接到用户的订单,里面要求用缩略图插件,于是用到了sf的SF的缩略图插件,再一想用上后,图片地址是一个动态地址,并不友好。所以看看插件后台,发现有一则nginx的伪静态规则,放在阿帕奇服务器上也用不上啊。。于是乎手写一个试试,方法如下:1.打开.htaccess文件(网站根目录下的该文件,用FTP工具打开修改):把这句:RewriteRule^sf_img1/(.*)-(.*)-(.*)-(....

ICPCCamp 2016 Day 3 - F Similar Subsequence (dp)_icpc camp2016 day1 f-程序员宅基地

文章浏览阅读371次。#include #include #include using namespace std;#define N 520#define inf 0x3f3f3f3fint n, m, a[N], b[N];int dp[N][N];int main() { scanf("%d%d", &n, &m); for(int i = 1; i <= n; ++i) { _icpc camp2016 day1 f

阅读《大型网站技术架构:核心原理与案例分析》第五、六、七章-程序员宅基地

文章浏览阅读68次。题目:阅读《大型网站技术架构:核心原理与案例分析》第五、六、七章,结合《XXX需求征集系统》,分析如何增加相应的功能,提高系统的可用性和易用性,撰写一篇1500字左右的博客阐述你的观点 在这一节课上,我们学习了系统质量属性其中的可用性和易用性。那么质量属性是什么呢,质量属性是高于对系统功能(即对系统能力、服务和行为)的基本的要求的。系统质量属性讲重点放在了可用性、可修改性、性能、..._大型网站技术 选择题

mysql 受影响行数,记录ID,存储过程查询_mysql 设置自动提交后,无法记录影响了多少行-程序员宅基地

文章浏览阅读1.5k次。查询存储过程的名字、所属数据库、类型:select name, db, type from mysql.proc where name = 'add_user';查询存储过程内容:select body from mysql.proc where name = 'add_user';目前mysql的存储过程内容无法修改,只能删掉重建。查询受影响行数:select row_mysql 设置自动提交后,无法记录影响了多少行