React Native UI差异总结

潇潇潇暮雨
912 阅读3分钟

背景

跨端框架在不同的操作系统上呈现出相应平台的设计风格，但在应用开发中，我们通常倾向于使用一奏设计风格，如iOS风格。然而，这可能导致跨端框架在非iOS系统（如Android）上的UI与设计不符，产生UI bug。此外，两个平台上的功能特性也有差异。

问题

不同的平台对于UI的表现会有所差异，包括但不限于以下方面：

  1. 基础控件默认样式，如TextInput和Text控件在不同系统中的默认样式差异。
  2. 屏幕适配问题，特别是对iPhone X等设备的特殊处理。
  3. 阴影与模糊效果的实现，如安卓不支持阴影效果。
  4. 用户习惯的差异，如删除方式和返回机制的差异。

策略

基础控件样式

1，建议为输入框TextInput指定颜色，因为安卓不同机型下默认色不一致，导致显示不统一。 而且安卓下的placeholder默认颜色大概在#777，iOS下默认颜色大概在#ccc

2，如果为TextInput已设置颜色，再调整颜色，不能置空，否则会crash，推测可能是RN的bug

//Error
const invalidTextStyle = isContainEmoji ? {color: '#FF695C'}:null

//Right
const invalidTextStyle = isContainEmoji ? {color: '#FF695C'}:{color: 'FF2500'}

3，ios默认无下划线的，而在android默认有下划线，需要去掉，看下面代码：

<TextInput
    underlineColorAndroid = "transparent"  //android需要设置下划线为透明才能去掉下划线
>
</TextInput>

4，iOS下lineHeight属性正常支持，文本会显示在中间位置，Android下文本会显示在最底端，解决办法就是设置textAlignVertical垂直居中，或者设置 paddingBottom 属性，手动调整文本内容到居中位置。

textAlignVertical = 'center',  //设置垂直居中

5，输入框组件，安卓平台无清除按钮，需要手动添加

6，Image 必须设置宽高才能正确渲染

<Image style={{width:8,height:12,}}
    resizeMode={'contain'}
    source={require('../../assets/images/me/me_icon_more.png')}/>

7，某些安卓机型下，圆角设置不生效，解决方法： 在原生的view外面，包一层View，并设置以下样式

overflow: 'hidden',
borderRadius: 6

8，安卓导航栏左侧按钮（返回按钮），只能放图片，不能放文本，一般遇到放“取消”的情况，都是用图片代替。

9，scrollview，在安卓上，若内容没有超出屏幕大小，不能滑动，ios是可以的。而且安卓上没有弹性效果。

屏幕适配

  • 对于iPhone X的屏幕适配，可以使用SafeAreaView包裹你的View，或者对底部和顶部进行特定的空间留白处理。
  • 对于安卓平台，由于导航栏和状态栏的高度在不同机型上是不确定的，我们可以使用onLayout方法来测量View的高度，从而计算出页面的真实高度。

阴影与模糊效果

  • 对于iOS平台，我们可以直接使用系统提供的阴影效果。而对于Android平台，我们可以使用阴影图片来模拟阴影效果，比如使用ImageBackground作为背景或者使用**absolute**属性控制阴影图的布局。

用户习惯

  • 对于列表信息的删除方式，虽然iOS和Android的原生习惯不同，但在RN开发的页面中，我们可以统一使用左滑删除信息的方式。
  • 对于返回机制，由于安卓有物理按键返回，而iOS只有手势侧滑返回，我们需要在处理返回事件时注意两端的差异。

效果

通过这些策略，我们可以有效地解决跨端开发中的UI表现差异问题，提供一致的用户体验。同时，这些策略也提高了开发效率，使得开发者能更好地关注业务逻辑的实现，而不必过于关注平台间的差异。

avatar
文章
阅读
粉丝