React Native常用组件在Android和IOS上的不同
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组件包裹起来。
