【Facebook的UI开发框架React入门之八】Image的使用简单介绍(iOS平台)-goodmao
2024-09-05 04:39:18
---------------------------------------------------------------------------------------------------
React.native是facebook开源的一套基于JavaScript的开源框架,
非常方便用来开发移动设备的app。
并且,方便及时更新app的UI与数据。也非常方便部署。
goodmao希望帮助大家迅速上手掌握!
----------------------------------------------------------------------------------------------------
參考:
源代码參考:Layout.h/.c文件
----------------------------------------------------------------------------------------------------
我们这一节,简介关于图像Image的使用。
目的是让大家在分分钟内理解并学会使用方法。
一、Image简单介绍:
React能够载入并显示多种来源的图片,包含:
1.本地静态资源图,本地暂时图;
2.网络图。
3.本地磁盘图(比如相冊或相机)。
二、用法
(1)本地静态图使用
1.加入图片到项目中
加入图片到项目中后。生成的app中直接包括了静态图片资源,能够直接使用。
有两种方式加入图片到项目中,如图:
a.直接在xcode中加入目录和图片
b.在Images.xcassets中加入图片
2.载入并显示
a.定义样式
var styles = StyleSheet.create({
container: {
//flex: 1, flexDirection: 'row', position: 'absolute',
top: 100,
left: 10, justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}, size: {
width: 100,
height: 150,
},
});
注意:须要设置flex属性为0或者使用默认值。否则flex:1,则图片会被拉伸。
b.创建类载入并显示图片
说明:导入本地静态资源图的方法为 require('image!1'),
当中,參数'image' 表示载入图片文件,參数'1' 是图片文件名称,
两者中间用感叹号'!'分隔。
注意:我尝试了用这两种方式载入jpg图片,竟然没显示,还没查明原因。
假设哪位搞定,麻烦告知和给各位朋友分享。
var HelloReact = React.createClass({ //设置视图Image
render: function() {
return (
<View style = {styles.container}>
<Image
style = {styles.size}
source = {require('image!1')} //1.Images.xcassets图片
/> <Image
style = {styles.size}
source = {require('image!2')} //2.Xcode中直接加入Images路径和图片
/>
</View>
);
}
});
(2)载入并显示server的图片
1.加入图片到server
在我们測试项目 HelloReact的目录中。与index.ios.js同一级目录,
创建目录存:server-image。存放以下js中须要载入的图片文件。
2.载入并显示图片
a.样式定义同上
b.创建类并载入和显示网络图
说明:直接用属性uri: 就可以载入网络图片,且支持常见图片格式(png,jpg等)。
var HelloReact = React.createClass({ //创建组件类 //组件的渲染方法
//设置视图Image
render: function() {
return (
<View style = {styles.container}>
<Image
source = {{uri: 'http://172.16.105.149:8081/server-image/goodmao.jpg'}} //3.网络图
style = {styles.size}
/>
</View>
);
}
});
三、执行效果图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWFveWluZ3lvbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
说明:图片来自“小偶App”,好玩吧?!
喜欢自拍的朋友。不要错过,哈哈!
最新文章
- Android自定义ViewGroup
- Can&#39;t load IA 32-bit .dll on a AMD 64-bit platform错误的解决
- iOS 适配https(AFNetworking3.0为例)
- (6) 如何用Apache POI操作Excel文件-----POI-3.10的一个和注解(comment)相关的另外一个bug
- 【NodeJS】---express配置ejs mongoose route等
- C# 委托的”四步走“
- hadoop学习记录(一)HDFS
- 使用Hibernate中出现了Caused by: java.sql.SQLException: Field &#39;gid&#39; doesn&#39;t have a default value
- 四大Java EE容器(Tomcat、JBoss、Resin、Glassfish)之简单比较
- mysql 日志操作
- 让树莓派自动上报IP地址到邮箱,二代B
- graphite的安装文档
- Hadoop DBOutputFormat的使用
- i.mx6 Android5.1.1 servicemanager本地服务
- Linux中如何配置IP相关文件
- MySQL 之 多表查询
- laravel 使用EasyWechat 3分钟完成微信支付(以APP支付为例)
- AngularJS:template
- CSS中样式
- DAY20-Django之FileField与ImageField