ReactNative系列组件用法(一)
程序员文章站
2022-06-05 22:03:21
首先我们来认识view 改变一些特性,再来看看项目的变化 我们新增flex布局的一些属性,再来看看项目的变化 接下来我们来看看如果获取屏幕的分辨率 关于图片的用法,reactNative这里也是很神奇呢 先看效果图(博客园里有个人经常发这种色情图片,然后我今天找这种线上链接就去他的闪存里面随便拿了一 ......
首先我们来认识view
改变一些特性,再来看看项目的变化
我们新增flex布局的一些属性,再来看看项目的变化
接下来我们来看看如果获取屏幕的分辨率
关于图片的用法,reactnative这里也是很神奇呢
先看效果图(博客园里有个人经常发这种色情图片,然后我今天找这种线上链接就去他的闪存里面随便拿了一个)
那我们怎么来实现这个效果呢?
在reactnative中,我们可以将图片写入文件,再在图片里面引进去
在我们的代码里面是如何进行的呢?
我们通过在view里面返回我们的要循环的每一模块,将其整体返回。
那间距我们是如何做的呢?
这里是通过引用全局变量做的
详细demo见我的github:https://github.com/jserjser/reactwebapp/tree/master/myapp
接下来看看textinput的用法,其实同普通的用法类似
如果我们将图片与input框结合起来做一个登录界面又如何呢?
再看看css部分我们的写法
touchableopacity实现点击文本即按下鼠标的情况
组件的生命周期(es5的写法)
scrollview滚动视图组件
不建议给他固定高度,内部也不建议使用flex布局
先看此demo
scrollview常用属性
设置horizontal={true}可以看到我们原本竖着的滚动视图编程横着可以滚动的视图了
上一篇: 第二章 算法——程序的灵魂
下一篇: 30 分钟集成融云 IM 即时通讯
推荐阅读
-
ReactNative系列组件用法(一)
-
开源一款强大的文件服务组件(QJ_FileCenter)(系列一)
-
开源一款强大的文件服务组件(QJ_FileCenter)(系列二 安装说明)
-
Netty 系列一(核心组件和实例).
-
从零开始学习Node.js系列教程一:http get和post用法分析
-
一天一个shell命令 linux文本操作系列-chmod命令用法
-
一天一个shell命令 linux文本操作系列-touch命令用法
-
一天一个shell命令 linux文本系列-file命令用法
-
一天一个shell命令 文本操作系列-comm命令用法
-
React-Native中一些常用组件的用法详解(一)