ReactNative系列组件用法(一)

首先我们来认识view
1037363-20181008101447820-580440367.png
改变一些特性,再来看看项目的变化
1037363-20181008102243806-430037375.png
我们新增flex布局的一些属性,再来看看项目的变化
1037363-20181008103219911-1419293038.png
1037363-20181008110440757-1965734978.png
接下来我们来看看如果获取屏幕的分辨率
1037363-20181008112425313-1876908934.png
关于图片的用法,reactNative这里也是很神奇呢
先看效果图(博客园里有个人经常发这种色情图片,然后我今天找这种线上链接就去他的闪存里面随便拿了一个)
1037363-20181008131041258-794346395.png
那我们怎么来实现这个效果呢?
在reactNative中,我们可以将图片写入文件,再在图片里面引进去
1037363-20181008131203184-189620950.png
在我们的代码里面是如何进行的呢?
1037363-20181008131246318-1506826347.png
我们通过在view里面返回我们的要循环的每一模块,将其整体返回。
1037363-20181008131430770-309897324.png
那间距我们是如何做的呢?
这里是通过引用全局变量做的
1037363-20181008131630514-351255191.png
1037363-20181008131732978-1758093905.png
详细demo见我的github:https://github.com/JserJser/reactWebApp/tree/master/MyApp
接下来看看TextInput的用法,其实同普通的用法类似
1037363-20181008141128692-659233673.png
如果我们将图片与input框结合起来做一个登录界面又如何呢?
1037363-20181008163630936-752113757.png
再看看css部分我们的写法
1037363-20181008163723235-979792392.png
1037363-20181008163734766-990611501.png
TouchableOpacity实现点击文本即按下鼠标的情况
1037363-20181008170447679-380225927.png
组件的生命周期(ES5的写法)
1037363-20181008175013344-1275535054.png
ScrollView滚动视图组件
不建议给他固定高度,内部也不建议使用flex布局
先看此demo
1037363-20181008180828405-718926889.png
scrollview常用属性
设置horizontal={true}可以看到我们原本竖着的滚动视图编程横着可以滚动的视图了
1037363-20181008181123970-626151109.png
1037363-20181008181212806-1120001452.png

转载于:https://www.cnblogs.com/smart-girl/p/9756031.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值