native react 图片多选_React Native中加载图片的各种姿势
初使用Image,由于在React Native中图片资源来源丰富,刚开始我也是一脸懵逼,在几番尝试以后,终于了然
加载项目目录图片
在项目目录中新建一个Directory,命名img,拷贝一张名为‘myicon.png’的图片
基本姿势
加载方法:
Image的各种姿势
效果如下图:
这里写图片描述
高级姿势
由于RN的图片资源文件的查找和 JS 模块相似,该会根据填写的图片路径相对于当前的 js 文件路径进行搜索。RN更加好的是Packager会根据平台选择相应的文件,例如 : myicon.ios.png 和 myicon.android.png 两个文件 ( 命名方式 android 或者 ios) 。该会根据 android 或者 ios 平台选择相应的文件。
我有两张图片,分别命名为myicon1.android.png和myicon1.ios.png
分别长这样:
这里写图片描述
这里写图片描述
Image的各种姿势
Android运行结果:
这里写图片描述
IOS运行结果:
这里写图片描述
Tips:
这边使用 Image 组件, require 中的图片名称必须为一个静态的字符串信息。不能在 require 中进行拼接。例如 :
这样之后运行就报错了 :
这里写图片描述
加载App中的图片
现阶段做原生 APP 的需求还是比较多的,不过现在使用了React Native 之后,我们可以进行混合开发APP ( 一部分采用 ReactNative ,另一部分采用原生平台代码 ). 甚至可以使用已经打包在APP中的图片资源 ( 例如 :xcode ass et 文件夹以及 Android drawable 文件夹 )
以Android为例,加载ic_launcher
Image的各种姿势
效果如下:
这里写图片描述
Tips:
1、加载App中的图片时,必须指定Image的大小,否则加载不出来
2、目前只支持访问drawable文件下的图片,mipmap文件夹下的图片不能访问
加载网络图片
很多时候,需要加载的是网络图片,网络图片的加载方法与本地图片的加载方法有所区别,这里必须指定图片的大小,类似于加载App图片
示例代码:
Image的各种姿势
效果如下:
这里写图片描述
native react 图片多选_React Native中加载图片的各种姿势相关推荐
- VC从文件中加载图片
用MFC做GDI开发的朋友肯定熟悉CBitmap类,该类封装了HBITMAP对象,简化了关于HBITMAP的API操作,如LoadBitmap方法可直接加载资源中指定ID的图片,但是很多情况下我们需要 ...
- Web前端笔记-js中加载图片文件(vue cli中同样适用)
这里主要是在vue cli项目中加载图片的时候会出现304,特别是使用自己写的js加载图片的时候,此博文记录了解决办法. 在js文件中引用文件 import img from '@/assets/im ...
- java 中加载图片
初学java在网上找了好多关于在applet中加载图片的程序,感觉比较多而乱,下面是个简单的示例: import java.awt.Frame; import java.applet.*; imp ...
- Vue项目中加载图片的坑
Vue项目中加载图片时,遇到的坑 1.当直接在标签中,使用图片路径,此时可以正常显示. <img src='img_src' /> 正常显示 2.当img标签的src属性为变量时,且该变量 ...
- Windows编程 内存中加载图片并显示 Direct离屏表面的实现
版本:VS2015 语言:C++ 前段时间去白空轨了,感觉快燃尽了.没有看Windows的书,所以博客也没更,不过请组织放心,从现在开始,即使是节假日,我也会仔细钻研DirectX的. 今天是第七章的 ...
- android设置背景图片不填充整个_使用Glide加载图片并填充满ImageView
作为谷歌推荐的图片加载库,Glide使用起来非常的简单. 1.在项目中添加依赖: dependencies { compile 'com.github.bumptech.glide:glide:3.7 ...
- 专为Android加载图片Fresco:详细图解SimpleDraweeView加载图片基础
Fresco简单的使用-SimpleDraweeView 百学须先立志-学前须知: 在我们平时加载图片(不管是下载还是加载本地图片-..)的时候,我们经常会遇到这样一个需求,那就是当图片正在加载时应该 ...
- html动态加载图片,javascript实现瀑布流动态加载图片原理
本文实例为大家分享了js瀑布流加载效果,动态加载图片,供大家参考,具体内容如下 鼠标滚动事件,当鼠标滚动到下边,动态加载图片. 1. HTML代码 js实现瀑布流效果-动态加载图片 2. CSS代码 ...
- picturectrl控件中加载图片并显示_在 CRA 中使用 webp 图片提升加载性能
webp 是 google 提倡的一种新的 image 格式,意在为 web 提供体积更小的图片格式.通常情况下,无损压缩可以减小 25%-35% 的体积(有例外情况,反而会增大体积,但是是因为转换图 ...
最新文章
- mysql 5.6.24 win32_mysql-5.6.24-win32解决没有my.ini并且修改编码
- opencv Canny边缘检测用法
- 2.6 动量梯度下降法-深度学习第二课《改善深层神经网络》-Stanford吴恩达教授
- linux光盘补救,Linux_忘记root密码时使用Linux系统光盘进行补救的方法,救援模式即rescue ,这个模式主 - phpStudy...
- boost::phoenix::lambda相关的测试程序
- php copy array,ES6中Array.copyWithin()函数用法的详解
- mcjava盗版联机_我的世界java版联机版
- python实现tsinghua-tencent 100000数据集的json文件转为xml文件
- 数据库存入表情符报错问题
- 单片机的单个IO口可以发送数据吗_5分钟了解单片机数据、地址、控制总线结构...
- stm32驱动ssd1306配置_自制FOC控制驱动器
- MySQL 启动服务和登陆参数
- C3P0数据库连接池
- MATLAB信号处理——信号与系统的分析基础(1)
- mysql统计每半小时内的数据(查寻某段时间内的数据)
- 寄存器、缓存、内存、硬盘、存储器的理解
- 非线性微分方程的平均法
- 论文公式编辑比较麻烦,试试截图快速识别并编辑公式!
- MFC生成错误msado15.tlh(3991):fatal error C1003: 错误计数超过100;正在停止编译
- neovim图标显示乱码,utf8字体显示乱码(Windows10和Centos安装nerd-fonts)