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 4b5b93d0a6e3182d7542143c60fe2b6a6c0c0d38..4d7943fd8c93d2a9c6febee8532e88497282c9f9 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 }) => (
+        <View style={styles.section}>
+            <Text style={styles.sectionTitle}>{title}</Text>
+            <Text style={styles.sectionContent}>{content}</Text>
+        </View>
+    );
+
+
     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 (
-        <ScrollView style={styles.container} >
-          <Text style={styles.title}>Complex Page</Text>
-
-          <Section title="Section 1" content="Content for section 1" />
-          <Section title="Section 2" content="Content for section 2" />
-          <Section title="Section 3" content="Content for section 3" />
-          <Section title="Section 4" content="Content for section 4" />
-          
-          <View style={styles.footer}>
-            <Text style={styles.footerText}>This is the footer content</Text>
-          </View>
-        </ScrollView>
-      );
-    }
+        return (
+            <ScrollView style={styles.container} >
+            <Text style={styles.title}>Complex Page</Text>
+
+            <Section title="Section 1" content="Content for section 1" />
+            <Section title="Section 2" content="Content for section 2" />
+            <Section title="Section 3" content="Content for section 3" />
+            <Section title="Section 4" content="Content for section 4" />
+            
+            <View style={styles.footer}>
+                <Text style={styles.footerText}>This is the footer content</Text>
+            </View>
+            </ScrollView>
+        );
+        }
+
+        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 }) => (
+        <View style={styles.section}>
+            <Text style={styles.sectionTitle}>{title}</Text>
+            <Text style={styles.sectionContent}>{content}</Text>
+        </View>
+    );
+
     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 (
-        <ScrollView style={styles.container} onLayout={ handleLayout }>
-          <Text style={styles.title}>Complex Page</Text>
-
-          <Section title="Section 1" content="Content for section 1" />
-          <Section title="Section 2" content="Content for section 2" />
-          <Section title="Section 3" content="Content for section 3" />
-          <Section title="Section 4" content="Content for section 4" />
-          
-          <View style={styles.footer}>
-            <Text style={styles.footerText}>This is the footer content</Text>
-          </View>
-        </ScrollView>
-      );
-    }
+        return (
+            <ScrollView style={styles.container} onLayout={ handleLayout }>
+            <Text style={styles.title}>Complex Page</Text>
+
+            <Section title="Section 1" content="Content for section 1" />
+            <Section title="Section 2" content="Content for section 2" />
+            <Section title="Section 3" content="Content for section 3" />
+            <Section title="Section 4" content="Content for section 4" />
+            
+            <View style={styles.footer}>
+                <Text style={styles.footerText}>This is the footer content</Text>
+            </View>
+            </ScrollView>
+        );
+        }
+
+        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`事件作为首帧时间，由开发者自行实现。