0 基础入门React Native鸿蒙跨平台开发：Systrace API进行性能分析-平芜编程栈

本文是基于HarmonyOS API 24的进行的ReactNative 鸿蒙跨平台开发依托适配鸿蒙的 RN 运行层，使用 React 与 JS 编写一套业务代码，无需大量 ArkTS 原生开发，通用业务实现代码复用，支持按需扩展原生桥调用鸿蒙特有能力，有效降低多平台开发维护成本。

ReactNative 鸿蒙跨平台开发，简单来说就是基于 ReactNative 技术栈，依托鸿蒙平台适配层，使用 JavaScript 与 React 语法编写一套业务代码，经过编译适配后同时支撑鸿蒙应用、安卓、iOS 等多端运行的开发方案。开发者沿用前端熟悉的组件化、状态管理等 React 开发范式，不用分别针对鸿蒙原生 ArkTS、安卓原生、iOS 原生独立实现相同业务逻辑，依靠桥接层完成 JS 逻辑与鸿蒙原生能力的通信，调用鸿蒙的窗口、媒体、设备硬件等系统接口，最终打包生成鸿蒙应用安装包，兼顾开发效率与多端复用能力，同时也存在部分鸿蒙特有系统能力需要编写原生桥模块进行扩展适配，复杂交互、高性能场景下要权衡跨平台通用方案与原生开发的取舍。

ReactNative 鸿蒙跨平台开发优势：

1.前端开发者直接复用已有的 React 开发经验与存量业务代码，一套代码可同时产出鸿蒙、安卓、iOS 多端应用，大幅降低多平台分别开发、维护的人力与时间成本，迭代更新时多数业务改动只需修改一处代码就能同步生效
2.借助 JS 热更新机制还能绕过应用商店快速推送功能修复与轻度版本变更
3.依托成熟的 React 生态，海量第三方组件、工具库可以直接接入，不用从零适配鸿蒙原生开发体系，上手门槛更低
4.熟悉网页与 React 技术的开发人员可以快速转型参与鸿蒙应用建设；
5.框架内置 JS 与原生的通信桥，基础 UI、网络、存储等通用设备能力开箱可用

大部分常规业务场景无需编写原生扩展模块，同时支持按需开发鸿蒙原生桥接模块调用系统独有能力，在跨端复用和平台特性之间保留灵活平衡，相比纯原生多端开发，团队可以更快完成产品落地，适合业务频繁迭代、需要同时覆盖多终端的中小型应用场景。

–

Systrace

Systrace is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.

Example

Systrace allows you to mark JavaScript (JS) events with a tag and an integer value. Capture the non-Timed JS events in EasyProfiler.

好的，以下是关于 React Native 项目中使用 Systrace 进行 UI 性能调试的详细指南。

Systrace 是一个强大的 Android 系统级性能分析工具，它通过在代码的关键位置添加时间标记来记录事件，最终生成一个详细的时序图表，帮助开发者定位应用卡顿、渲染缓慢等问题的根源。

一、准备工作

在开始使用 Systrace 之前，请确保完成以下准备工作：

关闭 JS 开发者模式：在发布版本或进行性能测试时，务必确保 React Native 的开发者模式已关闭。你可以在应用日志中寻找__DEV__ === false或development-level warning are OFF等字样来确认。这一步至关重要，因为开发者模式会引入额外的性能开销，影响分析结果的准确性。
连接设备：将你的 Android 设备通过 USB 线连接到电脑，并确保已开启设备的 USB 调试模式。
获取应用包名：你需要知道你要分析的应用的包名（Package Name）。这个信息通常在项目根目录下的android/app/src/main/AndroidManifest.xml文件的<manifest>标签中定义，但更准确的来源是android/app/build.gradle文件中的applicationId字段。

二、运行 Systrace

Systrace 通常随 Android SDK 的 platform-tools 包一同安装。你可以通过以下命令来启动数据收集：

<AndroidSDK所在目录>/platform-tools/systrace/systrace.py--time=10-otrace.html sched gfx view-a<你的应用包名>

命令参数详解：

--time=10：指定数据收集的持续时间为 10 秒。你可以根据需要调整这个时间。
-o trace.html：指定输出文件的名称。生成的分析结果会保存为trace.html文件，你可以在浏览器中打开它。
sched gfx view：这是你要收集的系统跟踪标记（tags）集合。
- sched：提供设备每个 CPU 核心的调度信息。
- gfx：提供图形渲染相关的信息，例如每帧的时间范围。
- view：提供视图布局和渲染相关的性能信息。
-a <你的应用包名>：启用应用过滤，只收集与你的应用相关的数据。

执行流程：

在终端中输入并执行上述命令。
命令开始执行后，立即操作你的应用，执行你关心的动画、导航或可能导致卡顿的操作。
在指定的时间（如10秒）结束后，Systrace 会自动停止收集数据，并生成trace.html文件。终端会输出一个链接，你可以直接点击该链接或在浏览器中手动打开trace.html文件来查看结果。

三、分析性能数据

打开trace.html后，你会看到一个详细的时序图表。以下是分析的关键步骤和要点：

启用垂直同步高亮：
- 在图表顶部的工具栏中，点击“垂直同步”或“VSYNC”高亮复选框。
- 这会在图表上显示16毫秒（对应60FPS）的帧间隔斑马纹。一个流畅的应用应该在每一帧内完成所有工作，而不会跨越帧边界。如果某些线程的工作超出了帧边界，就意味着该帧渲染超时，可能导致卡顿。
识别关键线程：
- UI 线程：线程名通常是你的应用包名或UI Thread。这里主要负责标准的 Android 布局和绘制工作。关注其中的Choreographer、traversals或DispatchUI等事件。
- JS 线程：线程名可能是mqt_js或类似名称。这是执行 React Native JavaScript 代码的线程。寻找JSCall、Bridge.executeJSCall等事件。
- 原生模块线程：线程名可能是mqt_native_modules或类似名称。这里执行原生模块的代码（如UIManager）。关注NativeCall、CallJavaModuleMethod等事件。

实际案例演示：

importReactfrom"react";import{Button,Text,View,StyleSheet,Systrace}from"react-native";constApp=()=>{constenableProfiling=()=>{Systrace.setEnabled(true);// Call setEnabled to turn on the profiling.Systrace.beginEvent('event_label')Systrace.counterEvent('event_label',10);}conststopProfiling=()=>{Systrace.endEvent()}return(<View style={styles.container}><Text style={[styles.header,styles.paragraph]}>React Native SystraceAPI</Text><Button title="Capture the non-Timed JS events in EasyProfiler"onPress={()=>enableProfiling()}/><Button title="Stop capturing"onPress={()=>stopProfiling()}color="#FF0000"/></View>);}conststyles=StyleSheet.create({container:{flex:1,backgroundColor:'#fff',alignItems:'center',justifyContent:'center',paddingTop:44,padding:8},header:{fontSize:18,fontWeight:"bold",textAlign:"center"},paragraph:{margin:24,textAlign:"center"}});exportdefaultApp;

这段代码实现了一个React Native应用，核心功能是通过Systrace API进行性能分析。Systrace是Android标准的标记式性能分析工具，用于监控应用的CPU、图形和视图渲染性能。代码通过两个按钮控制Systrace的开启和停止，帮助开发者捕获和分析JavaScript线程的非定时事件。