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


    React Native常用组件在AndroidIOS上的不同

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

    1.1 heightfontSize

    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等于fontSize1.2倍时,显示效果与只指定fontSize、不指定height类似。如果height继续增大,此时Text组件中显示字符的上方空间保持不变,而下方空间会随着height的增大而增大。

      在Android平台上,当height等于fontSize1.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 fontSzieheight

    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平台上,当指定了上、下padding0时,从height大于fontSize1.1倍起,可以认为输入的字符串会始终处于TextInput组件区域的中部。

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

    2.4 边框

      在TextInput的样式中加入“borderWidth1”。

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

      在Android平台上,没有边框。

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

  • 相关阅读:
    苹果新政,禁止开发者在App中加入检查更新功能
    Xcode 的正确打开方式——Debugging(转)
    AlertView + Block 的使用
    iOS 中Window优先级的问题
    iOS加载启动图的时候隐藏statusbar + 指定启动图显示多少秒
    eclispe+axis2+webservice入门
    Eclispe远程调试tomcat设置
    华为入职培训小计
    Java面试题总结 from Baidu 网易 阿里
    使用MyEclipse 9.0 创建 struts2 的HelloWorld 工程
  • 原文地址:https://www.cnblogs.com/Potato-lover/p/6740863.html
Copyright © 2020-2023  润新知