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. hdu3450

    分析:首先要知道有递推公式dp[i] = Sigma(dp[j]),dp[i]表示第i个数结尾的完美子序列的个数,|a[i] - a[j]| <= d,j<i.直接这样做的时间复杂度为n^ ...

  2. The Balance POJ 2142 扩展欧几里得

    Description Ms. Iyo Kiffa-Australis has a balance and only two kinds of weights to measure a dose of ...

  3. JNA调用库文件

    最近项目中要集成厂商的卡口摄像头,需要通过jna调用库函数接收卡口相机抓拍的过车数据.本文记录了Java调用C语言动态库(jna)的调用方式.回调函数.结构体等. JNA全称Java Native A ...

  4. springMVC 返回中文字符串时乱码

    转载自:https://blog.csdn.net/yaov_yy/article/details/51819567

  5. Linux 安装 RabbitMQ

    转载文章,地址:https://www.cnblogs.com/uptothesky/p/6094357.html 侵删!

  6. Maven奇怪的问题,当找不到Maven输出的提示错误时可以试下这个方法

    Maven有时会输出一些奇怪的错误,尤其是用Eclipse自动下载的包,然后根据提示的错误在网上找不到时,可以试下直接删除.m2文件夹,即本地仓库.然后再重新在控制台下执行打包命令来下载包.

  7. 多Tabs的横向滚动插件(支持Zepto和jQuery)

    一. 效果图 二. 功能介绍 1. 支持横向移动 2. 支持点击Tab后该Tab居中 3. 拉到最左边和最右边后依然可以拉动,只是tabs的移动距离变小. 三. 使用说明 1. 在你的html中添加T ...

  8. Node: 在Mac中离线安装Sqlite3

    最近在安装db-migrate的时候,有一个依赖包sqlite3怎样都安装不了,检查下来应该是由于node_sqlit3.node文件无法从Amazon下载导致(源码安装也报错,没有研究过原因).于是 ...

  9. 移动智能设备功耗优化系列--前言(NVIDIA资深project师分享)

    本文是嵌入式企鹅圈原创团队成员.NVIDIA资深开发project师Terry发表的第一篇文章,其将对"移动智能设备功耗优化"这个专题展开一个系列的总结分享. Terry毫无保留地 ...

  10. Cisco路由器配置ADSL上网

    cisco1841#sh run Building configuration... Current configuration : 2970 bytes ! version 12.4 service ...