React Native常用组件在Android和IOS上的不同

一、Text组件在两个平台上的不同表现

1.1 height与fontSize

1.1.1只指定font,不指定height

  在这种情况下,Text组件在两个平台上显示都正常。

  可以看到,在垂直方向上,Text组件要比字高,上下都留有富余的空间,这样显示出来美观。但如果仔细看,就会发现Android平台的显示下方所留的控件比IOS平台的显示下方所留的空间要小一些。在IOS平台上,上下富余的空间基本相等;而在Android平台上,上方富余空间的高度大概下下方空间的1.5倍。

1.1.2 只指定height,不指定fontSize

  在这种极端情况下,不论height是何值,fontSize的值都是13。

1.1.3 fontSize等于height

  在这种情况下,IOS平台和Android平台的表现不同。在IOS平台上,字的上方还有空间,但字的最下一部分没有显示出来。在Android平台上,这种情况更严重。

1.1.4 height大于fontSize

  在IOS平台上,当height等于fontSize的1.2倍时,显示效果与只指定fontSize、不指定height类似。如果height继续增大,此时Text组件中显示字符的上方空间保持不变,而下方空间会随着height的增大而增大。

  在Android平台上,当height等于fontSize的1.35倍时,显示效果与只指定fontSize、不指定height类似。如果height继续增大,此时Text组件中显示字符的上方空间保持不变,而下方空间会随着height的增大而增大。

1.2 边框在两个平台上的不同表现

  在样式中设置边框,比如“borderWidth:1”。

  在IOS平台上,能够出现预想的边框效果。

  在Android平台上,边框不会出现。

  为了实现在Android平台上Text组件有边框,需要用一个View组件包裹Text组件。而这个View组件只需要有一个样式boderWidth。这种方式可以适用于两个平台。

二、TextInput组件在两个平台上的不同表现

2.1 下划线

  Android平台上,输入框区域有一条下划线,提醒用户这里是一个输入框。

  IOS平台上,输入框区域没有下划线。

2.2 父组件的alignItems属性失效

  在一个组件中声明“alignItems:’center’”时,期望这个组件的子组件(TextInput)能够居中对齐。

  在Android平台上,TextInput组件的父组件样式键“alignItems:’center’”工作正常。

  在IOS平台上,TextInput组件的对齐规则是从最左侧对齐。

  为了让IOS平台的TextInput组件遵从父组件的对齐规则,需要将TextInput组件使用一个没有任何属性的View组件包裹起来。

2.3 fontSzie和height

2.3.1 只指定font、不指定height

  在IOS平台上,如果TextInput组件只指定fontSize,没有指定height,这时height会取默认值0。也就是,在IOS平台上,没有指定样式中height键值的TextInput组件不会显示。

  在Android平台上,如果TextInput组件样式中只指定了fontSize,没有指定height,这时height会根据fontSize动态调整,保证输入字符串的上、下方都有比较多的富余空间。

2.3.2 height等于fontSize

  在Android平台上,当height等于fontSize时,TextInput组件中的字明显被遮盖。而且是上方被遮盖。如果再加入设置“paddingTop:0, paddingBottom:0”,显示正常。

  在IOS平台上,当height等于fontSize时,字的下方被略微遮盖。

2.3.3 height大于fontSize

  在Android平台上,当指定了上、下padding为0时,从height大于fontSize的1.1倍起,可以认为输入的字符串会始终处于TextInput组件区域的中部。

  在IOS平台上,不论是否指定了上、下padding为0,从height大于fontSize的1.1倍起,可以认为输入的字符串会始终处于TextInput组件区域的中部。

2.4 边框

  在TextInput的样式中加入“borderWidth:1”。

  在IOS平台上,正确显示了边框。

  在Android平台上,没有边框。

  让Android平台的TextInput组件正确显示边框的方法与Text类似,把Textinput组件用一个View组件包裹起来。

React Native常用组件在Android和IOS上的不同的更多相关文章

  1. react native 常用组件汇总

    react-native-uploader //文件上传https://github.com/aroth/react-native-uploader jpush-react-native //官方版本 ...

  2. React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方

    以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation  react-native ...

  3. React Native常用组件Image使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  4. React Native常用组件之ScrollView

    1. 两个要点 1.1 ScrollView必须有一个确定的高度才能正常工作 它实际上所做的就是将一系列不确定高度的子组件装进一个确定高度的容器(通过滚动操作) 通常有两种做法: 第一种: 直接给该S ...

  5. 一起来点React Native——常用组件之Image

    一.前言 在开发中还有一个非常重要的组件Image,通过这个组件可以展示各种各样的图片,而且在React Native中该组件可以通过多种方式加载图片资源. 二.Image组件的基本用法 2.1 从当 ...

  6. React Native常用组件之ListView组件

    学习iOS开发的同学应该都知道UITableView,几乎每个APP中都有它的存在,而且衍生出各种形态:那么同样,ListView就是在React Native中的tableView,而且更加简单和灵 ...

  7. React Native常用组件之ScrollView组件

    一.前言 从iOS开发的经验来看,scrollView无疑是移动开发中很重要的一个组件,比如后面会学到的ListView就是继承自它.那么,在开发中比如:焦点图.引导页等地方都有其的影子,那接下来我们 ...

  8. React Native常用组件之ListView

    1. ListView常用属性 ScrollView 相关属性样式全部继承 dataSource ListViewDataSource 设置ListView的数据源 initialListSize n ...

  9. 一起来点React Native——常用组件之Touchable系列

    在前面的登录界面中,我们发现所有的组件不会对用户的点击.触摸.拖拽做出合适的响应,这是十分不友好的.那么,在React Native中如何让视图对触发做出合适的响应呢? 一.高亮触摸  Touchab ...

随机推荐

  1. [bzoj3289]Mato的文件管理_莫队_树状数组

    Mato的文件管理 bzoj-3289 题目大意:给定一个n个数的序列.m次询问:一段区间中的逆序对个数. 注释:$1\le n\,mle 5\cdot 10^4$. 想法: 开始想这个题的大佬们,给 ...

  2. HashMap源码分析2:扩容

    本文源码基于JDK1.8.0_45. final Node<K,V>[] resize() { Node<K,V>[] oldTab = table; int oldCap = ...

  3. Ubuntu 16.04常用快捷键(转)

    注意:在Linux下Win键就是Super键 启动器 Win(长按) 打开启动器,显示快捷键 Win + Tab 通过启动器切换应用程序 Win + 1到9 与点击启动器上的图标效果一样 Win + ...

  4. Srping Boot日志输出(转)

    说明:其实经过研究,在最新版本的Spring Boot中默认使用的是logback进行日志输出,其余的都没有引入.但是网上的教程说只要按照下面的文件列表引入对应的配置文件就会进行输出,这个没有实践过, ...

  5. zoj 1880 - Tug of War

    题目:有n个人分成两组,两组人数差不能超过1,找到两组的人重量之差的最小值. 分析:dp,二维01背包. 由于必须放在两个组中的一组,直接背包全部可到状态, 取出相差不超过 1的最接近 sum/2的值 ...

  6. vim随想笔记(1)

    本人是一个vim的狂热粉丝,越是使用vim,越是认为琐碎内容太多,时不时地出现一些自己没有见过的使用方法.命令. 因此准备在博客上用空余时间在阅读<学习vi和vim编辑器>的基础上总结一下 ...

  7. tomcat的localhost_access_log日志文件

    一.服务器打印日志要关闭hibernate的日志,首先要把hibernate.show_sql设置为false;然后设置log4j.properties. # Control logging for ...

  8. Java中去除字符串中的空格

    1.去掉首尾的空格 String.trim()  trim()是去掉首尾空格 2.去掉所有的空格 str.replace(" ", ""); 去掉所有空格,包括 ...

  9. linux用户态和内核态通信之netlink机制【转】

    本文转载自:http://blog.csdn.net/zcabcd123/article/details/8272360 这是一篇学习笔记,主要是对<Linux 系统内核空间与用户空间通信的实现 ...

  10. ZOJ 2397:Tian Ji -- The Horse Racing

    Tian Ji -- The Horse Racing Time Limit: 5 Seconds      Memory Limit: 32768 KB Here is a famous story ...