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}可以看到我们原本竖着的滚动视图编程横着可以滚动的视图了


ReactNative系列组件用法(一)的更多相关文章
- React-Native Listview组件用法详解
ListView作为React Native的核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表.其中最重要的属性之一是DataSource,列表依赖的数据源,用于实例化一个ListView对象 ...
- React-Native 常用组件学习资料链接
以下链接是自己开发RN工程时参考的一些不错的资料,给喜欢学习的朋友分享以下. React-Native组件用法详解之ListViewhttp://www.jianshu.com/p/1293bb8ac ...
- 《React-Native系列》38、 ReactNative混合组件封装
在我们做ReactNative项目的过程中,我们会发现由ReactNative提供给我们的组件或API往往满足不了我们的需求,常常需要我们自己去封装Native组件. 今天我们介绍下如果封装一个简单的 ...
- 《React-Native系列》3、RN与native交互之Callback、Promise
接着上一篇<React-Native系列>RN与native交互与数据传递,我们接下来研究另外的两种RN与Native交互的机制 一.Callback机制 首先Calllback是异步的, ...
- Easyui主要组件用法
Easyui主要组件用法说明: 1. combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...
- react-native 获取组件的宽度和高度
react-native 获取组件的尺寸有两种方式,第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对 ...
- Vuejs的指令及组件用法总结
vuejs介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能 ...
- 《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化
曾经写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况.建议读者能够先看看 1.<React-Native系列>33. 键盘遮挡问题处理 2.<Rea ...
- FASTX-Toolkit组件用法
FASTX-Toolkit组件用法 Command Line Arguments FASTQ-to-FASTA FASTQ/A Quality Statistics FASTQ Quality cha ...
随机推荐
- [个人博客作业Week7]软件工程团队项目感想与反思
在阅读了推荐阅读的材料之后,我想了很多东西.最终还是决定,以团队项目的经历为主线,叙述我关于软件工程的一些思考与体会. 凤凰涅槃,浴火重生 如果要我来概况这几周团队项目的经历的话,那么句话是我所能想到 ...
- 第八周--Linux中进程调度与进程切换的过程
[潘恒 原创作品转载请注明出处 <Linux内核分析>MOOC课程 "http://mooc.study.163.com/course/USTC 1000029000 " ...
- 《Linux内核设计与实现》读书笔记——第四章
标签(空格分隔): 20135321余佳源 第四章 进程调度 调度程序负责决定将哪个进程投入运行,何时运行以及运行多长时间,进程调度程序可看做在可运行态进程之间分配有限的处理器时间资源的内核子系统. ...
- 《蹭课神器》Beta版使用说明
相比 Alpha 版,我对主界面进行了优化,使主界面更加简洁 同时数据库增加了一个表,里面存放的是课程的详细信息
- APP推广(预期方案)
首先,在推广过程中有一些定的弊端:我们这个O2O平台暂时只能适用于学校局域网. 因为我们的APP才刚刚“出炉”不久,在网络上还是属于一篇空白的状态,我们想过可以在百度百科上进行相应的推广,如果有用户搜 ...
- PAT 1061 判断题
https://pintia.cn/problem-sets/994805260223102976/problems/994805268817231872 判断题的评判很简单,本题就要求你写个简单的程 ...
- 如何利用Hadoop存储小文件
**************************************************************************************************** ...
- jmeter创建基本的FTP测试计划
这个测试计划中创建4个用户从FTP站点请求2个文件,也可以让用户重复发送2次请求,这样总请求次数=4*2*2=16 使用以下元素:thread group / FTP Request /FTP Req ...
- Java MD5Util
package util; import java.security.MessageDigest; public class MD5Util { public static String strin ...
- JAVA内部类小结
内部类的概念:定义在其他类里面的类叫做内部类,包含内部类的类叫做外部类: 内部类的作用:内部类主要是用来描述一个事物存在于另一个事物里面,依赖于外部事物存在的: 内部类的格式: 内部类的分类: 成员内 ...