记录RN开发中遇到的兼容性问题

最新推荐文章于 2025-05-12 16:23:30 发布

原创

最新推荐文章于 2025-05-12 16:23:30 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react native

博客详细记录了在React Native开发中遇到的Android和iOS平台的兼容性问题，包括Android上的文字超出容器、图片刷新、Switch组件样式、TextInput样式、状态栏渲染、WebView加载、字符显示、键盘影响布局、JS方法兼容性以及iOS中WebView参数解析等问题，并给出了相应的解决策略。

记录一些工作中遇到的兼容性问题：https://github.com/aijason/react-native-platform-compatibility-issues

Android

1、如果无设置具体宽度，部分安卓手机会出现文字超出容器情况。

  lgNormalText: {
    flex: 1,
    flexWrap: 'wrap',
    fontSize: S(28),
  }

解决方法：

给Text或Text容器设置具体宽度，不能使用flex：1

  lgNormalText: {
    width: S(508),
    flexWrap: 'wrap',
    fontSize: S(28),
  }

2、安卓上图片地址无改变时，图片不会刷新。

解决方法：

后台返回新图片地址需是唯一的
前端给图片地址参数加上时间戳

const newImageUri = https://www.image.com?a=b&timestamp=${new Date().getTime()}

3、官方Switch组件新trackColor属性在部分安卓无效

<Switch
  onValueChange={onChange}
  value={isChecked}
  style={styles.switchStyle}
  onTintColor={ButtonColor.SWITCH_BACKGROUND_GREEN} // 忽略警告使用trackColor替换，在安卓无效，暂不替换。
/>

解决方法：使用onTintColor属性