React Native(五):Image的各种姿势
来源:互联网 发布:香港买mac pro 过关 编辑:程序博客网 时间:2024/05/15 07:46
初使用Image,由于在React Native中图片资源来源丰富,刚开始我也是一脸懵逼,在几番尝试以后,终于了然
加载项目目录图片
在项目目录中新建一个Directory,命名img,拷贝一张名为‘myicon.png’的图片
基本姿势
加载方法:
<View> <Text>Image的各种姿势</Text> <Image source={require('./img/myicon.png')} /></View>
效果如下图:
高级姿势
由于RN的图片资源文件的查找和 JS 模块相似,该会根据填写的图片路径相对于当前的 js 文件路径进行搜索。RN更加好的是Packager会根据平台选择相应的文件,例如 : myicon.ios.png 和 myicon.android.png 两个文件 ( 命名方式 android 或者 ios) 。该会根据 android 或者 ios 平台选择相应的文件。
我有两张图片,分别命名为myicon1.android.png和myicon1.ios.png
分别长这样:
<View> <Text>Image的各种姿势</Text> <Image source={require('./img/myicon1.png')} /></View>
Android运行结果:
IOS运行结果:
Tips:
这边使用 Image 组件, require 中的图片名称必须为一个静态的字符串信息。不能在 require 中进行拼接。例如 :
<Image source={require('./img/myicon'+'.png')} />
这样之后运行就报错了 :
加载App中的图片
现阶段做原生 APP 的需求还是比较多的,不过现在使用了React Native 之后,我们可以进行混合开发APP ( 一部分采用 ReactNative ,另一部分采用原生平台代码 ). 甚至可以使用已经打包在APP中的图片资源 ( 例如 :xcode ass et 文件夹以及 Android drawable 文件夹 )
以Android为例,加载ic_launcher
<View> <Text>Image的各种姿势</Text> <Image source={{uri:'ic_launcher'}} style={{width: 100, height: 100}} /></View>
效果如下:
Tips:
1、加载App中的图片时,必须指定Image的大小,否则加载不出来
2、目前只支持访问drawable文件下的图片,mipmap文件夹下的图片不能访问
加载网络图片
很多时候,需要加载的是网络图片,网络图片的加载方法与本地图片的加载方法有所区别,这里必须指定图片的大小,类似于加载App图片
示例代码:
<View> <Text>Image的各种姿势</Text> <Image source={{uri:'http://avatar.csdn.net/2/1/1/1_shiquanqq.jpg'}} style={{width:100,height:100}}/></View>
效果如下:
- React Native(五):Image的各种姿势
- react-native------Image require正确使用姿势
- react-native的正确姿势
- React-native Image的初识
- React Native 入门姿势
- react-native进入姿势
- React Native 入门(五)
- React-native 之Image的使用
- Android React Native加载图片资源的正确姿势
- 使用VSCode开发React-Native的正确姿势
- 使用VSCode开发React-Native的正确姿势
- Android React Native加载图片资源的正确姿势
- React native Image组件
- React Native--Image控件
- React Native Image 总结
- react-native-image-picker
- react-native-image-picker
- react-native-image-picker
- "><img src=hi onerror=alert(1)>
- apache和nginx开启https
- 2016过去了 期待2017
- vim显示行号并设置tab为4个字符的命令
- iOS10适配 完美解决相机、相册等权限的使用
- React Native(五):Image的各种姿势
- Oracle 查询
- ldd 3 重定向打印开启 misc-progs
- git
- 1月2日 51 Node 1189 阶乘分数
- spring quartz配置定时任务
- NOSQL数据库浅析(三):Redis
- 10分钟详细解读android scrollview
- js数组去重