0
代码
代码
Issues
Pull Requests
讨论
Wiki
分析
0
Ggyangedocs(Docs): optimize the docs structure
eec718bb创建于 4月22日历史提交

规格类FAQ

React Native 升级到 0.72.5 版本

请参考RN升级需要开发者适配整理，在此文档中，梳理了 React Native 0.59 版本到 0.72.5 版本的主要修改点，您可以根据此文档修改您的代码，并升级 React Native 的版本。

开启Fabric以后重要变更

UIManager.measure 的实现不正确，获取到的布局数据与 iOS 不一致？

  • A：UIManager.measure在Fabric开启时是不支持的，请使用onLayout或者ref.current.measure代替。

主题字体未生效/fontFamily未生效

  • 主题字体优先于fontFamily生效。
  • 主题字体的变更需要重启应用后才能生效。

RN Date.parse()时间转换问题

RN本身并不直接规定日期字符串的格式，而是依赖于JavaScript的Date对象。JS支持以下三种日期格式：

  • Date.parse("2024-11-20 14:00:00");//ISO 8601 格式
  • Date.parse('Mon, 20 Mar 2023 14:00:00 GMT');//RFC 2822 / IETF 标准

2024/10/24是非标准的日期格式，可以考虑依赖三方库Moment进行处理。比如：

  • const date = moment('2024/10/24', 'YYYY/MM/DD').format('YYYY-MM-DD');

RN setNativeProps只能生效一次问题

在React Native启用Fabric渲染器之后，在使用setNativeProps时，只会在应用打开之后生效一次，剩余时间setNativeProps无法使用。该问题为RN框架社区已知问题，且setNativeProps在0.72.5版本已废弃。可使用setState来进行状态设置。例如，在输入框内进行内容清空时，可以用setState来实现：

import React, { useState } from 'react';
import {
  View,
  TextInput,
  Button,
  StyleSheet,
} from 'react-native';

const App = () => {
  const [text, setText] = useState(''); // 保存 TextInput 的值

  const clearText = () => {
    setText(''); // 清空输入框
  };

  return (
    <View style={styles.container}>
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText} // 更新状态
        placeholder="输入一些内容"
      />
      <Button title="清空" onPress={clearText} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
  input: {
    width: '100%',
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 4,
    marginBottom: 16,
    paddingHorizontal: 8,
  },
});

export default App;

zIndex 问题说明

  1. 需要设置非 static 的 position 才能使 zIndex 生效
    在启用 Fabric 渲染器的情况下，zIndex 必须与 position 一起使用（如 relative 或 absolute），否则设置了 zIndex 也不会生效。这一点与 Web 行为一致，是 Fabric 渲染机制的规范化体现。

  2. 元素的层级排列顺序发生了变化，zIndex 越大越靠上
    与旧架构（非 Fabric）不同，Fabric 启用后，zIndex 的作用更加明确且优先级更高。元素的层级不再依赖组件声明顺序，而是严格按照 zIndex 数值来决定显示的上下关系，zIndex 数值越大，元素越靠上。

ScrollView组件的 velocity 字段说明

含义：velocity 代表组件的滚动速度

说明：计算值与 android 对比有一定的差异，harmony 平台采用了最小二乘法拟合出瞬时速度来计算，比 android 更加线性。

RN鸿蒙暂不支持toLocaleLowerCase接口

  • 如果不要求支持国际化，可使用toLowerCase转换。
  • 如果要求支持国际化，需要对部分国际化语言字符进行自定义特殊转换。

RN适老化如何限制字体缩放倍数问题

  • API13之前，不支持该功能。
  • 应用配置fontSizeMaxScale字段，限制字体缩放倍数，默认工程无配置。
  • 配置后，调整系统字体大小或者显示大小，RN页面组件仅放大到当前配置的倍数，超过该倍数不再放大。

StatusBar 使用建议与能力边界说明

请参考使用类FAQ - StatusBar 使用说明， 该文档中对 HarmonyOS 平台下 StatusBar 的系统能力边界、常见使用风险以及推荐使用方式进行了详细说明。

  • HarmonyOS 平台中，StatusBar 控制能力属于系统级能力，所有设置均对整个系统窗口全局生效。
  • React Native 的 StatusBar 组件设计为页面级能力，该设计与 HarmonyOS 的系统能力模型不一致。
  • 基于平台能力限制，RNOH 无法在 HarmonyOS 上实现与 Android / iOS 一致的页面级 StatusBar 管理与自动回退机制。

使用建议：

  • HarmonyOS 场景下，推荐使用系统默认状态栏策略。
  • 不建议在 RN 页面中频繁或动态控制 StatusBar。
  • 若业务确有特殊需求，可在页面中使用 RN StatusBar 接口，但需自行保证页面切换时的状态一致性。

RN鸿蒙对带有旋转属性的图片处理问题

  • RNOH Image 在创建时默认将 orientation 设为 auto。
  • 该能力依赖 ArkUI 的 NODE_IMAGE_ORIENTATION 属性，而该属性官方仅支持 API 21 及以 上。
  • 因此，在 API 21+ 设备上，带旋转元数据的图片会按预期方向显示（旋转被正确修正）； 在 API 21 以下设备上，由于该属性不可用，这类图片仍会按原始旋转信息显示，出现旋转。

键盘避让场景下间隔短暂透出上一页面元素问题

使用 KeyboardAvoidingView 时，键盘收起/弹出速度与页面位移动画不同步，可能间隔会短暂露出下层页面内容。这是由于平台能力限制，系统键盘事件通知存在时序延迟，键盘高度变化信息滞后于实际动画进度，该问题为 React Native 框架已知限制，Android 和 HarmonyOS 平台表现一致。