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 ...
随机推荐
- Nginx基于TCP/UDP端口的四层负载均衡(stream模块)配置梳理
通过我们会用Nginx的upstream做基于http/https端口的7层负载均衡,由于Nginx老版本不支持tcp协议,所以基于tcp/udp端口的四层负载均衡一般用LVS或Haproxy来做.至 ...
- 常用rsync命令操作梳理
作为一个运维工程师,经常可能会面对几十台.几百台甚至上千台服务器,除了批量操作外,环境同步.数据同步也是必不可少的技能.说到“同步”,不得不提的利器就是rsync.rsync不但可以在本机进行文件同步 ...
- Python基础系列讲解——random模块随机数的生成
随机数参与的应用场景大家一定不会陌生,比如密码加盐时会在原密码上关联一串随机数,蒙特卡洛算法会通过随机数采样等等.Python内置的random模块提供了生成随机数的方法,使用这些方法时需要导入ran ...
- 701 C. They Are Everywhere
链接 [http://codeforces.com/group/1EzrFFyOc0/contest/701/problem/C] 题意 给你一个包含大小写字母长度为n的字符串,让你找包含所有种类字符 ...
- myeclipse快捷方式汇总
选择你要注释的那一行或多行代码,按Ctrl+/即可,取消注释也是选中之后按Ctrl+/即可. 如果你想使用的快捷键的注释是的话,那么你的快捷键是ctrl+shift+/我以前都是手动注释的,直接打// ...
- python2 与 python3 实现共存
已有配置 Anaconda2+python2.7 方案一:直接安装官网原生python3.6 1.修改根目录下python.exe ->python3.exe pythonw.exe - ...
- tensorflow win10 系统下安装
安装tensorflow gpu版本 Step1 安装CUDA8.0 进入这个云盘地址下载,密码5aoc 进行CUDA8.0下载.下载完成后解压,打开exe文件直接按照默认进行安装,安装步骤比较繁琐, ...
- windows的cmd下的find命令比bash(win10下的Ubuntu的bash)下的grep比较
同样的一个catalina文件,windows的cmd下的find命令比bash下的grep要慢,windows确实占下风啊
- CSS响应式网站开发
<html> <head> //当设备屏幕最大宽度小于1024px时加载如下CSS内容 @media screen and (max-width: 1024px){ ...
- 学习笔记之form表单
form表单提交的数据 是字典类型 这样 方便在create时候 直接解压