From a98ef0b47816c71eee8e3fde477222e348087b94 Mon Sep 17 00:00:00 2001
From: yangmingtao <205499550@qq.com>
Date: Fri, 21 Feb 2025 15:48:01 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E9=BD=90=E6=80=A7=E8=83=BD=E8=B0=83?=
=?UTF-8?q?=E4=BC=98=E6=96=87=E6=A1=A3=E4=B8=AD=E5=9C=A8=E7=BA=BF=E7=9B=91?=
=?UTF-8?q?=E6=8E=A7RN=E9=A1=B5=E9=9D=A2=E7=9A=84=E6=80=A7=E8=83=BD?=
=?UTF-8?q?=E6=8C=87=E6=A0=87FCP=E7=9A=84=E4=B8=A4=E7=A7=8D=E6=96=B9?=
=?UTF-8?q?=E5=BC=8F=E4=BB=A3=E7=A0=81=E6=AE=B5=E7=9A=84=E6=A0=B7=E5=BC=8F?=
=?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: yangmingtao <205499550@qq.com>
---
...47\350\203\275\350\260\203\344\274\230.md" | 181 ++++++++++++++----
1 file changed, 141 insertions(+), 40 deletions(-)
diff --git "a/docs/zh-cn/\346\200\247\350\203\275\350\260\203\344\274\230.md" "b/docs/zh-cn/\346\200\247\350\203\275\350\260\203\344\274\230.md"
index 4b5b93d0..4d7943fd 100644
--- "a/docs/zh-cn/\346\200\247\350\203\275\350\260\203\344\274\230.md"
+++ "b/docs/zh-cn/\346\200\247\350\203\275\350\260\203\344\274\230.md"
@@ -100,58 +100,159 @@ React Native for OpenHarmony 使用 `onMemoryLevel` 用于监听程序内存的
在ReactNative工程的代码中实现如下代码：
```TypeScript
+ import React, { useState, useEffect } from 'react';
+ import { ScrollView, Text, View, StyleSheet} from 'react-native';
+
+ const Section = ({ title, content }) => (
+
+ {title}
+ {content}
+
+ );
+
+
export default function ComplexPage() {
- const [isLoading, setIsLoading] = useState(true);
+ const [isLoading, setIsLoading] = useState(true);
- useEffect(() => {
- // 此处是页面mount标志，可以调用自定义TurboModule上报到原生侧作为FCP标志
- return () => {
- };
- }, []);
+ useEffect(() => {
+ // 此处是页面mount标志，可以调用自定义TurboModule上报到原生侧作为FCP标志
+ return () => {
+ };
+ }, []);
- return (
-
- Complex Page
-
-
-
-
-
-
-
- This is the footer content
-
-
- );
- }
+ return (
+
+ Complex Page
+
+
+
+
+
+
+
+ This is the footer content
+
+
+ );
+ }
+
+ const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ padding: 16,
+ backgroundColor: '#f5f5f5',
+ },
+ title: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ marginBottom: 16,
+ textAlign: 'center',
+ },
+ section: {
+ marginBottom: 20,
+ padding: 12,
+ backgroundColor: '#fff',
+ borderRadius: 8,
+ },
+ sectionTitle: {
+ fontSize: 18,
+ fontWeight: '600',
+ marginBottom: 8,
+ },
+ sectionContent: {
+ fontSize: 16,
+ color: '#666',
+ },
+ footer: {
+ padding: 16,
+ backgroundColor: '#fff',
+ marginTop: 24,
+ borderRadius: 8,
+ },
+ footerText: {
+ textAlign: 'center',
+ fontSize: 16,
+ color: '#333',
+ },
+ });
```
>注意事项：JS侧调用[自定义TurboModule](./TurboModule.md)上报页面`mount`事件作为首帧时间，由开发者自行实现。
- 方式2：React JS侧监控页面根节点`onLayout`事件作为FCP的标志。
在React Native工程的代码中实现如下代码：
```TypeScript
+ import React, { useState, useEffect } from 'react';
+ import { ScrollView, Text, View, StyleSheet} from 'react-native';
+
+ const Section = ({ title, content }) => (
+
+ {title}
+ {content}
+
+ );
+
export default function ComplexPage() {
- const [isLoading, setIsLoading] = useState(true);
+ const [isLoading, setIsLoading] = useState(true);
- const handleLayout = (event) => {
- // 此处是页面根节点onLayout回调，可以调用自定义TurboModule上报到原生侧作为FCP标志
- };
+ const handleLayout = (event) => {
+ // 此处是页面根节点onLayout回调，可以调用自定义TurboModule上报到原生侧作为FCP标志
+ };
- return (
-
- Complex Page
-
-
-
-
-
-
-
- This is the footer content
-
-
- );
- }
+ return (
+
+ Complex Page
+
+
+
+
+
+
+
+ This is the footer content
+
+
+ );
+ }
+
+ const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ padding: 16,
+ backgroundColor: '#f5f5f5',
+ },
+ title: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ marginBottom: 16,
+ textAlign: 'center',
+ },
+ section: {
+ marginBottom: 20,
+ padding: 12,
+ backgroundColor: '#fff',
+ borderRadius: 8,
+ },
+ sectionTitle: {
+ fontSize: 18,
+ fontWeight: '600',
+ marginBottom: 8,
+ },
+ sectionContent: {
+ fontSize: 16,
+ color: '#666',
+ },
+ footer: {
+ padding: 16,
+ backgroundColor: '#fff',
+ marginTop: 24,
+ borderRadius: 8,
+ },
+ footerText: {
+ textAlign: 'center',
+ fontSize: 16,
+ color: '#333',
+ },
+ });
```
> 注意事项：JS侧调用[自定义TurboModule](./TurboModule.md)上报页面根节点`onLayout`事件作为首帧时间，由开发者自行实现。
--
Gitee