首先我们来认识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系列组件用法(一)的更多相关文章

  1. React-Native Listview组件用法详解

    ListView作为React Native的核心组件,用于高效地显示一个可以垂直滚动的变化的数据列表.其中最重要的属性之一是DataSource,列表依赖的数据源,用于实例化一个ListView对象 ...

  2. React-Native 常用组件学习资料链接

    以下链接是自己开发RN工程时参考的一些不错的资料,给喜欢学习的朋友分享以下. React-Native组件用法详解之ListViewhttp://www.jianshu.com/p/1293bb8ac ...

  3. 《React-Native系列》38、 ReactNative混合组件封装

    在我们做ReactNative项目的过程中,我们会发现由ReactNative提供给我们的组件或API往往满足不了我们的需求,常常需要我们自己去封装Native组件. 今天我们介绍下如果封装一个简单的 ...

  4. 《React-Native系列》3、RN与native交互之Callback、Promise

    接着上一篇<React-Native系列>RN与native交互与数据传递,我们接下来研究另外的两种RN与Native交互的机制 一.Callback机制 首先Calllback是异步的, ...

  5. Easyui主要组件用法

    Easyui主要组件用法说明: 1.  combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...

  6. react-native 获取组件的宽度和高度

    react-native 获取组件的尺寸有两种方式,第一种方式使用元素自身的onLayout属性去获取,但是这种方式有一个局限性,就是只有在初次渲染的时候才会触发这个函数,而且此种方法获取的是组件相对 ...

  7. Vuejs的指令及组件用法总结

    vuejs介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能 ...

  8. 《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化

    曾经写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况.建议读者能够先看看 1.<React-Native系列>33. 键盘遮挡问题处理 2.<Rea ...

  9. FASTX-Toolkit组件用法

    FASTX-Toolkit组件用法 Command Line Arguments FASTQ-to-FASTA FASTQ/A Quality Statistics FASTQ Quality cha ...

随机推荐

  1. ansible一键部署k8s单机环境

    一.虚拟机准备 干净的Centsot7.4.4G内存.2个CPU 最小化安装,最好带虚拟化 二.执行初始化脚本 注意:脚本中配置静态网卡根据实际网卡名称配置,我用的是ens33 可以用 sed -i ...

  2. Docker网络解决方案 - Weave部署记录

    前面说到了Flannel的部署,今天这里说下Docker跨主机容器间网络通信的另一个工具Weave的使用.当容器分布在多个不同的主机上时,这些容器之间的相互通信变得复杂起来.容器在不同主机之间都使用的 ...

  3. maven 第一个Web项目——HelloWorld

    1.安装Maven,具体步骤,参照博客[maven的安装与配置]http://www.cnblogs.com/dyh004/p/8523260.html 2.配置阿里云为Maven中央仓库,具体步骤, ...

  4. 前端安全之XSS

    XSS定义 XSS, 即为(Cross Site Scripting), 中文名为跨站脚本, 是发生在目标用户的浏览器层面上的,当渲染DOM树的过程成发生了不在预期内执行的JS代码时,就发生了XSS攻 ...

  5. Python基础系列讲解——random模块随机数的生成

    随机数参与的应用场景大家一定不会陌生,比如密码加盐时会在原密码上关联一串随机数,蒙特卡洛算法会通过随机数采样等等.Python内置的random模块提供了生成随机数的方法,使用这些方法时需要导入ran ...

  6. 20135337——Linux实践三：ELF文件格式（64位系统，简单分析）

    ELF文件格式简单分析 (具体分析见上一篇ELF文件格式32位系统) ELF-header 第一行: 457f 464c :魔数: 0201 :64位系统,小端法 01 :文件头版本 剩余默认0: 第 ...

  7. JQuery监听页面滚动总结

    1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var winPos = $(window).scrollTop(); 2.获取指定元素的页面位置: $(val).offset().top; 3. ...

  8. github个人作业

    信息学院本科生课程设计 题目                    文件加密和解密 课程名称 面向对象程序设计课程设计 课程编号 X031749 所在专业 计算机科学与技术 所在班级 计科高职13-3 ...

  9. 接口(interface)与多态

    1. 接口(interface)是抽象方法与常量值的集合: 2. 从本质上来讲,接口是一种特殊的抽象类,这种抽象类中只包含常量与方法的定义,而没有变量和方法的实现: 3. 接口中声明的属性默认为:pu ...

  10. nginx for Windows Known issues：path

    http://nginx.org/en/docs/windows.html nginx/Windows uses the directory where it has been run as the ...