React Native(五):Image的各种姿势
初使用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运行结果: <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>
效果如下: 加载网络图片很多时候,需要加载的是网络图片,网络图片的加载方法与本地图片的加载方法有所区别,这里必须指定图片的大小,类似于加载App图片 示例代码: <View> <Text>Image的各种姿势</Text> <Image source={{uri:'http://avatar.csdn.net/2/1/1/1_shiquanqq.jpg'}} style={{width:100,height:100}}/> </View>
效果如下: (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- oracle常用命令及SQL
- 在ruby工作中如何获取和gets.chomp?
- AutoCAD.Net/C#.Net QQ群:193522571 程序中需要判断是attde
- jsonp+jquery示例代码,jsonp是什么?看完了还不会我就给你跪
- Flash ActionScript3.0 (7)创建Bitmap类的实例
- react闲谈——react15.4和webpack2实现一个计数器
- ruby-on-rails – Geocoder Gem – Ruby On Rails
- flex 4 dropdownlist skin自定义 2
- graphql – 突变后,如何跨视图更新受影响的数据?
- 正则表达式教程之子表达式用法分析