Update advanced topics documentation for native modules and components

- Translated section titles and content to Chinese for better accessibility.
- Revised the structure and wording to enhance clarity and understanding of advanced topics in native modules and components.
- Removed legacy native module setup documentation across multiple versions to streamline the content.

Author: sunnylqm

cndocs/the-new-architecture/advanced-topics-components.md

@@ -1,9 +1,9 @@
-# Advanced Topics on Native Modules Development
+# 深入原生组件开发
 
-This document contains a set of advanced topics to implement more complex functionalities of Native Components. It is recommended to first read the [Codegen](/docs/the-new-architecture/what-is-codegen) section and the guides on [Native Components](/docs/fabric-native-components-introduction).
+本文档包含一些深度技术主题，用于实现原生组件的更复杂功能。建议先阅读 [Codegen](/docs/the-new-architecture/what-is-codegen) 部分和 [原生组件](/docs/fabric-native-components-introduction) 指南以获得更好的理解。
 
-This guide will cover the following topics:
+本指南将涵盖以下主题：
 
-- [Direct Manipulation](/docs/the-new-architecture/direct-manipulation-new-architecture)
-- [Measuring the Layout](/docs/the-new-architecture/layout-measurements)
-- [Invoking native functions on your native component](/docs/next/the-new-architecture/fabric-component-native-commands)
+- [直接操作](/docs/the-new-architecture/direct-manipulation-new-architecture)
+- [测量布局](/docs/the-new-architecture/layout-measurements)
+- [在原生组件上调用原生函数](/docs/next/the-new-architecture/fabric-component-native-commands)

cndocs/the-new-architecture/advanced-topics-modules.md

@@ -1,6 +1,6 @@
-# 原生模块开发高级主题
+# 深入原生模块开发
 
-本文档包含一系列高级主题，用于实现原生模块的更复杂功能。建议先阅读 [Codegen](/docs/the-new-architecture/what-is-codegen) 部分和 [原生模块](/docs/turbo-native-modules-introduction) 指南。
+本文档包含一些深度技术主题，用于实现原生模块的更复杂功能。建议先阅读 [Codegen](/docs/the-new-architecture/what-is-codegen) 部分和 [原生模块](/docs/turbo-native-modules-introduction) 指南以获得更好的理解。
 
 本指南将涵盖以下主题：
 

cnwebsite/sidebars.ts

@@ -97,6 +97,7 @@ export default {
           {
             type: 'doc',
             id: 'turbo-native-modules-introduction',
+            key: 'turbo-native-modules-introduction',
             label: 'Android 和 iOS',
           },
           {
@@ -107,7 +108,7 @@ export default {
           {
             type: 'doc',
             id: 'the-new-architecture/advanced-topics-modules',
-            label: '高级主题',
+            label: '深入原生模块开发',
           },
         ],
       },
@@ -120,12 +121,13 @@ export default {
           {
             type: 'doc',
             id: 'fabric-native-components-introduction',
+            key: 'fabric-native-components-introduction',
             label: 'Android 和 iOS',
           },
           {
             type: 'doc',
             id: 'the-new-architecture/advanced-topics-components',
-            label: '高级主题',
+            label: '深入原生组件开发',
           },
         ],
       },

cnwebsite/versioned_docs/version-0.76/legacy/native-module-setup.md

@@ -1,33 +1,35 @@
 ---
 id: native-modules-setup
-title: Native Modules NPM Package Setup
+title: 原生模块配置
 ---
 
 import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
 
 <NativeDeprecated />
 
-Native modules are usually distributed as npm packages, except that on top of the usual JavaScript they will include some native code per platform. To understand more about npm packages you may find [this guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) useful.
+原生模块通常作为 npm 包分发，除了常规的 JavaScript 外，它们还会包含每个平台的一些本地代码。要了解更多关于 npm 包的信息，你可能会发现[这个指南](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry)很有用。
 
-To get set up with the basic project structure for a native module we will use the community tool called [create-react-native-library](https://callstack.github.io/react-native-builder-bob/create). You can go ahead further and dive deep into how that library works, but for our needs we will only execute the basic script:
+为了设置一个原生模块的基本项目结构，我们将使用社区工具[Bob](https://github.com/react-native-community/bob)。你可以继续深入了解该库的工作原理，但对于我们的需求，我们只需要执行基本的`create`脚本：
 
-```shell
-npx create-react-native-library@latest react-native-awesome-module
+```sh
+npx @react-native-community/bob create react-native-awesome-module
 ```
 
-Where `react-native-awesome-module` is the name you would like for the new module. After doing this you will navigate into `react-native-awesome-module` folder and bootstrap the example project by running:
+`react-native-awesome-module` 是您希望为新模块命名的名称。完成此操作后，在终端进入到 `react-native-awesome-module` 文件夹，并运行以下命令来引导示例项目：
 
-```shell
-yarn
+```sh
+yarn bootstrap
 ```
 
-When the bootstrap is done, you will be able to start the example app by executing one of the following commands:
+当引导完成后，您可以通过执行以下任一命令启动示例应用程序：
 
-```shell
+```sh
 # Android app
 yarn example android
 # iOS app
 yarn example ios
 ```
 
-When all steps above are done, you will be able to continue with [Android Native Modules](native-modules-android) or [iOS Native Modules](native-modules-ios) guides to add in some code.
+当完成上述所有步骤后，您将能够继续使用 [Android Native Modules](native-modules-android) 或 [iOS Native Modules](native-modules-ios) 指南来添加一些代码。
+
+> 想要一个不那么主观的设置？可查看第三方工具 [create-react-native-module](https://github.com/brodybits/create-react-native-module)。

cnwebsite/versioned_docs/version-0.76/legacy/native-modules-setup.md

@@ -1,33 +1,35 @@
 ---
 id: native-modules-setup
-title: Native Modules NPM Package Setup
+title: 原生模块配置
 ---
 
 import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
 
 <NativeDeprecated />
 
-Native modules are usually distributed as npm packages, except that on top of the usual JavaScript they will include some native code per platform. To understand more about npm packages you may find [this guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) useful.
+原生模块通常作为 npm 包分发，除了常规的 JavaScript 外，它们还会包含每个平台的一些本地代码。要了解更多关于 npm 包的信息，你可能会发现[这个指南](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry)很有用。
 
-To get set up with the basic project structure for a native module we will use the community tool called [create-react-native-library](https://callstack.github.io/react-native-builder-bob/create). You can go ahead further and dive deep into how that library works, but for our needs we will only execute the basic script:
+为了设置一个原生模块的基本项目结构，我们将使用社区工具[Bob](https://github.com/react-native-community/bob)。你可以继续深入了解该库的工作原理，但对于我们的需求，我们只需要执行基本的`create`脚本：
 
-```shell
-npx create-react-native-library@latest react-native-awesome-module
+```sh
+npx @react-native-community/bob create react-native-awesome-module
 ```
 
-Where `react-native-awesome-module` is the name you would like for the new module. After doing this you will navigate into `react-native-awesome-module` folder and bootstrap the example project by running:
+`react-native-awesome-module` 是您希望为新模块命名的名称。完成此操作后，在终端进入到 `react-native-awesome-module` 文件夹，并运行以下命令来引导示例项目：
 
-```shell
-yarn
+```sh
+yarn bootstrap
 ```
 
-When the bootstrap is done, you will be able to start the example app by executing one of the following commands:
+当引导完成后，您可以通过执行以下任一命令启动示例应用程序：
 
-```shell
+```sh
 # Android app
 yarn example android
 # iOS app
 yarn example ios
 ```
 
-When all steps above are done, you will be able to continue with [Android Native Modules](native-modules-android) or [iOS Native Modules](native-modules-ios) guides to add in some code.
+当完成上述所有步骤后，您将能够继续使用 [Android Native Modules](native-modules-android) 或 [iOS Native Modules](native-modules-ios) 指南来添加一些代码。
+
+> 想要一个不那么主观的设置？可查看第三方工具 [create-react-native-module](https://github.com/brodybits/create-react-native-module)。

cnwebsite/versioned_docs/version-0.77/legacy/native-module-setup.md

@@ -1,33 +1,35 @@
 ---
 id: native-modules-setup
-title: Native Modules NPM Package Setup
+title: 原生模块配置
 ---
 
 import NativeDeprecated from '../the-new-architecture/\_markdown_native_deprecation.mdx'
 
 <NativeDeprecated />
 
-Native modules are usually distributed as npm packages, except that on top of the usual JavaScript they will include some native code per platform. To understand more about npm packages you may find [this guide](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry) useful.
+原生模块通常作为 npm 包分发，除了常规的 JavaScript 外，它们还会包含每个平台的一些本地代码。要了解更多关于 npm 包的信息，你可能会发现[这个指南](https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry)很有用。
 
-To get set up with the basic project structure for a native module we will use the community tool called [create-react-native-library](https://callstack.github.io/react-native-builder-bob/create). You can go ahead further and dive deep into how that library works, but for our needs we will only execute the basic script:
+为了设置一个原生模块的基本项目结构，我们将使用社区工具[Bob](https://github.com/react-native-community/bob)。你可以继续深入了解该库的工作原理，但对于我们的需求，我们只需要执行基本的`create`脚本：
 
-```shell
-npx create-react-native-library@latest react-native-awesome-module
+```sh
+npx @react-native-community/bob create react-native-awesome-module
 ```
 
-Where `react-native-awesome-module` is the name you would like for the new module. After doing this you will navigate into `react-native-awesome-module` folder and bootstrap the example project by running:
+`react-native-awesome-module` 是您希望为新模块命名的名称。完成此操作后，在终端进入到 `react-native-awesome-module` 文件夹，并运行以下命令来引导示例项目：
 
-```shell
-yarn
+```sh
+yarn bootstrap
 ```
 
-When the bootstrap is done, you will be able to start the example app by executing one of the following commands:
+当引导完成后，您可以通过执行以下任一命令启动示例应用程序：
 
-```shell
+```sh
 # Android app
 yarn example android
 # iOS app
 yarn example ios
 ```
 
-When all steps above are done, you will be able to continue with [Android Native Modules](native-modules-android) or [iOS Native Modules](native-modules-ios) guides to add in some code.
+当完成上述所有步骤后，您将能够继续使用 [Android Native Modules](native-modules-android) 或 [iOS Native Modules](native-modules-ios) 指南来添加一些代码。
+
+> 想要一个不那么主观的设置？可查看第三方工具 [create-react-native-module](https://github.com/brodybits/create-react-native-module)。