CN112835584B - 基于ReactNative实现组件扩展和管理的方法 - Google Patents

Abstract

本发明涉及一种基于ReactNative实现组件扩展和管理的方法，包括进行组件定义；通过调用预设命令或开发自定义脚本来编写组件脚本；对组件进行断点调试及功能测试；选择组件的发布模式，并发布至npm仓库，其中，所述的组件的发布模式包括源码发布和依赖包介质发布；通过组件中心的服务进行组件管理；填写组件要求的参数，使用组件。采用了本发明的基于ReactNative实现组件扩展和管理的方法，实现了在ReactNative更方便进行组件的编写，还提供了组件脚本方法，从而解决了组件使用时需要开发者进行繁琐配置的问题，实现了通过选择组件填写参数而无需其他配置就可以直接使用；还提供了组件打包发布的方法，支持只发布组件打包产物而非源码，做到了更方便地浏览与选用组件。

Description

基于ReactNative实现组件扩展和管理的方法

技术领域

本发明涉及移动App领域，尤其涉及ReactNative组件扩展领域，具体是指一种基于ReactNative实现组件扩展和管理的方法。

背景技术

当今互联网时代，移动技术飞速发展，移动技术栈也是多种多样。ReactNative、Flutter、小程序等平台方便了的开发流程，提高了的开发效率，也为组件封装制定了一些规范，但对于某些业务和通用功能的封装，还是不够完善。组件扩展不仅仅是对平台基础功能的补充，同时还是团队开发、跨部门开发的基石，供不同开发者快速使用。目前许多厂商都会自己封装组件，供企业内部开发者使用，也会开源出去，与外部开发者一起完善组件库。

目前比较流行的ReactNative、Flutter、小程序等几个平台都提供了相应的组件扩展机制。在日常开发中，当现有组件无法满足需求，或需要开发的功能具有一定的通用性时，会采用封装组件的形式来实现。

例如在ReactNative中，首先通过命令行工具根据模板填写组件信息等，并创建组件项目。接着进入Android文件夹创建ReactModule和ReactPackage类，并在其中开发组件功能。然后进入iOS文件夹同理开发iOS平台的组件功能。最后编写index.js文件，实现JS与原生的调用方法封装。开发完成后就可以将该组件以npm包的形式发布到公共仓库中。其他开发者可以通过npm安装组件，并按照组件文档中的要求修改自己的项目，之后就可以在项目中引用组件，并调用组件接口。

以当前比较流行的ReactNative框架的扩展机制为例，由于组件需求多种多样，在扩展的过程中只能开发组件对应的Android、iOS库项目，且对主项目的影响也只局限于库项目的能力。例如Android中增加ReactPackage初始化代码到主项目中、iOS在info.plist文件中新增字段等等，这些操作涉及到对主项目的修改，而目前只能以文档和说明的形式引导开发者自行修改，而无法让组件项目本身将这些繁琐的配置完成。使用本发明就可以在组件项目中将需要开发者手动配置的任务自动化。

发明内容

本发明的目的是克服了上述现有技术的缺点，提供了一种满足操作简便、流程简单、适用范围较为广泛的基于ReactNative实现组件扩展和管理的方法。

为了实现上述目的，本发明的基于ReactNative实现组件扩展和管理的方法如下：

该基于ReactNative实现组件扩展和管理的方法，其主要特点是，所述的方法包括以下步骤：

(1)进行组件定义；

(2)通过调用预设命令或开发自定义脚本来编写组件脚本；

(3)对组件进行断点调试及功能测试；

(4)选择组件的发布模式，并发布至npm仓库，其中，所述的组件的发布模式包括源码发布和依赖包介质发布；

(5)通过组件中心的服务进行组件管理；

(6)填写组件要求的参数，使用组件。

较佳地，所述的步骤(1)的进行组件定义具体为通过原生代码编写视图或开发功能，并通过JavaScript调用；其中，组件为npm包的形式，包括组件的android模块、ios模块和js模块，以及组件声明配置文件和组件脚本部分。

较佳地，所述的android模块为Android库项目，作为库项目供主项目依赖，或编译成Android库项目的产物aar包；

所述的ios模块为iOS库项目，包括项目的名称、版本的信息，所述的ios模块直接被主项目以pod方式依赖，或单独编译成为iOS库项目产物framework；

所述的组件声明配置文件包括组件名、版本号、描述的信息，还包括android模块的ReactNative扩展类名、混淆配置、依赖处理、需要申请的权限、自定义属性占位符的信息，还包括ios模块的ReactNative扩展类名、posspec文件相对路径、需要申请的权限及权限描述、自定义属性占位符的信息；

所述的组件脚本部分为js项目，调用预设的文件操作命令，在编译中修改主项目配置，增删改查部分文件。

较佳地，所述的预设命令包括设置Android中placeholder的值、设置iOS中plist的自定义key/value、设置Android混淆配置、设置自定义依赖、增加项目maven仓库、修改项目build.gradle文件、修改项目manifest.xml文件、修改iOS项目scheme、修改iOS项目编译配置以及修改iOS项目后台功能。

较佳地，所述的自定义脚本为通过nodejs语言编写的脚本，用于操作并增删改查主项目配置文件。

较佳地，所述的步骤(3)具体包括以下步骤：

在组件目录执行组件调试的命令，生成调试项目，通过工具运行并调试；

生成Android及iOS的原生开发项目，经过bundle编译，并根据组件声明配置文件，依赖android模块和ios模块的库项目，调用组件脚本，使开发模式和生产发布模式下的集成逻辑相同；

生成ReactNative前端项目，并提供初始页面，进行调试和验证；

所述的原生开发项目用于开发，以及打包生成最终的生产包apk和ipa，对生产模式下组件功能进行验证。

较佳地，所述的步骤(4)的源码发布为将组件目录下android模块和ios模块的源码打包进npm包中并发布；

所述的步骤(4)的依赖包介质发布为将android模块和ios模块的源码打包成aar/pom和framework/podspec文件的形式，将Android和iOS的库项目打包成产物，发布时发布至npm包中。

较佳地，所述的步骤(4)中组件npm包发布至npm私库、公网npmjs或组件中心服务。

较佳地，所述的步骤(5)通过组件中心的服务提供组件查看界面、组件发布和组件审核功能，所述的组件查看界面进行查看、搜索和筛选组件，根据特定条件查询组件，并查看指定组件的基础信息、开发文档和历史版本的数据。

较佳地，所述的步骤(1)具体包括以下步骤：

在组件配置页面查看所有的已发布的组件列表，并通过勾选的方式选择需要使用的组件，同时填写组件要求的参数，在项目中使用组件，并提供代码提示功能。

采用了本发明的基于ReactNative实现组件扩展和管理的方法，实现了在ReactNative更方便进行组件的编写，还提供了组件脚本方法，从而解决了组件使用时需要开发者进行繁琐配置的问题，实现了通过选择组件填写参数而无需其他配置就可以直接使用；还提供了组件打包发布的方法，支持只发布组件打包产物而非源码；由于提供了组件发布与管理方法，从而做到了更方便地浏览与选用组件。

附图说明

图1为本发明的基于ReactNative实现组件扩展和管理的方法的流程附图。

图2为本发明的基于ReactNative实现组件扩展和管理的方法的2、组件目录结构附图。

具体实施方式

为了能够更清楚地描述本发明的技术内容，下面结合具体实施例来进行进一步的描述。

本发明的该基于ReactNative实现组件扩展和管理的方法，其中包括以下步骤：

(1)进行组件定义；

(2)通过调用预设命令或开发自定义脚本来编写组件脚本；

(3)对组件进行断点调试及功能测试；

(4)选择组件的发布模式，并发布至npm仓库，其中，所述的组件的发布模式包括源码发布和依赖包介质发布；

(5)通过组件中心的服务进行组件管理；

(6)填写组件要求的参数，使用组件。

作为本发明的优选实施方式，所述的步骤(1)的进行组件定义具体为通过原生代码编写视图或开发功能，并通过JavaScript调用；其中，组件为npm包的形式，包括组件的android模块、ios模块和js模块，以及组件声明配置文件和组件脚本部分。

作为本发明的优选实施方式，所述的android模块为Android库项目，作为库项目供主项目依赖，或编译成Android库项目的产物aar包；

所述的ios模块为iOS库项目，包括项目的名称、版本的信息，所述的ios模块直接被主项目以pod方式依赖，或单独编译成为iOS库项目产物framework；

所述的组件声明配置文件包括组件名、版本号、描述的信息，还包括android模块的ReactNative扩展类名、混淆配置、依赖处理、需要申请的权限、自定义属性占位符的信息，还包括ios模块的ReactNative扩展类名、posspec文件相对路径、需要申请的权限及权限描述、自定义属性占位符的信息；

所述的组件脚本部分为js项目，调用预设的文件操作命令，在编译中修改主项目配置，增删改查部分文件。

作为本发明的优选实施方式，所述的预设命令包括设置Android中placeholder的值、设置iOS中plist的自定义key/value、设置Android混淆配置、设置自定义依赖、增加项目maven仓库、修改项目build.gradle文件、修改项目manifest.xml文件、修改iOS项目scheme、修改iOS项目编译配置以及修改iOS项目后台功能。

作为本发明的优选实施方式，所述的自定义脚本为通过nodejs语言编写的脚本，用于操作并增删改查主项目配置文件。

作为本发明的优选实施方式，所述的步骤(3)具体包括以下步骤：

在组件目录执行组件调试的命令，生成调试项目，通过工具运行并调试；

生成Android及iOS的原生开发项目，经过bundle编译，并根据组件声明配置文件，依赖android模块和ios模块的库项目，调用组件脚本，使开发模式和生产发布模式下的集成逻辑相同；

生成ReactNative前端项目，并提供初始页面，进行调试和验证；

所述的原生开发项目用于开发，以及打包生成最终的生产包apk和ipa，对生产模式下组件功能进行验证。

作为本发明的优选实施方式，所述的步骤(4)的源码发布为将组件目录下android模块和ios模块的源码打包进npm包中并发布；

所述的步骤(4)的依赖包介质发布为将android模块和ios模块的源码打包成aar/pom和framework/podspec文件的形式，将Android和iOS的库项目打包成产物，发布时发布至npm包中。

作为本发明的优选实施方式，所述的步骤(4)中组件npm包发布至npm私库、公网npmjs或组件中心服务。

作为本发明的优选实施方式，所述的步骤(5)通过组件中心的服务提供组件查看界面、组件发布和组件审核功能，所述的组件查看界面进行查看、搜索和筛选组件，根据特定条件查询组件，并查看指定组件的基础信息、开发文档和历史版本的数据。

作为本发明的优选实施方式，所述的步骤(1)具体包括以下步骤：

在组件配置页面查看所有的已发布的组件列表，并通过勾选的方式选择需要使用的组件，同时填写组件要求的参数，在项目中使用组件，并提供代码提示功能。

本发明的具体实施方式中，设计移动App领域，特别涉及基于ReactNative的组件扩展的方法，具体指基于ReactNative框架实现组件的扩展开发，并对组件进行调试、发布和管理。通过对ReactNative组件扩展机制的扩展与封装，解决了组件扩展过程中调试流程复杂的问题，通过组件脚本方法，还解决了组件使用时需要开发者进行繁琐配置的问题，同时还优化了组件调试、发布过程，将组件管理了起来，项目在浏览和和选用组件时也更加方便。

本技术方案提供在ReactNative中实现组件扩展及项目组件化管理的方法，下面将详细描述组件的定义、组件扩展方法、组件调试方法、组件发布与组件管理等过程。

1、组件的定义：

1.1、在ReactNative中允许开发者使用原生代码来编写视图或开发功能，而通过JavaScript来调用，在运行时，ReactNative为这些组件创建对应的Android和iOS视图或提供对应的功能，这种方式开发出来的视图或功能就是组件。

1.2、组件主要分为官方核心组件和三方扩展的组件，ReactNative提供了一套扩展机制供开发者使用，但仍然存在问题和不便利。一般来说，ReactNative中组件以npm包形式存在，其中包括组件的android、ios及js部分。

1.3、本专利所述组件也是以npm包形式存在，其中包括组件的android、ios及js实现部分，还有组件声明配置文件及组件脚本部分。

1.4、android、ios及js实现部分为组件功能的实现代码，其中主要为Java、Object-C、JavaScript语言实现，并按照ReactNative要求的实现规范进行编写，做到原生与ReactNative层的交互及通信。

1.5、其中android文件夹中为Android库项目，可以单独作为库项目供主项目依赖，也可以单独编译成Android库项目的产物aar包。

1.6、其中ios文件夹中为iOS库项目，需要提供对应podspec文件，其中声明了该库项目的名称、版本等关键信息。该iOS库项目可以直接被主项目以pod方式依赖，也可以单独编译成为iOS库项目产物framework。

1.7、其中组件声明配置文件中声明了组件名、版本号、描述等基础信息，也声明了Android的ReactNative扩展类名、混淆配置、依赖处理、需要申请的权限、自定义属性占位符等信息，也声明了iOS的ReactNative扩展类名、posspec文件相对路径、需要申请的权限及权限描述、自定义属性占位符等信息。

1.8、其中组件脚本部分为js项目，可以调用预设的文件操作命令，以便在编译时修改主项目配置，增删改查部分文件，做到组件主动修改主项目，做到无需在集成组件后再去手动修改主项目的效果。

2.组件扩展方法：

2.1、组件在扩展是遵守ReactNative要求的实现规范。Android中需要实现ReactPackage类方法，并创建ReactModule，在其中实现业务逻辑。iOS中需要继承RCTBridgeModule类，并将编写的方法导出。

2.2、组件在编写组件脚本部分时，可以调用预设命令，也可以开发自定义脚本。

2.3、(2.2)中所述预设命令包括设置Android中placeholder的值、设置iOS中plist的自定义key/value、设置Android混淆配置、设置自定义依赖、增加项目maven仓库、修改项目build.gradle文件、修改项目manifest.xml文件、修改iOS项目scheme、修改iOS项目编译配置、修改iOS项目后台功能等能力。

2.4、(2.2)中所述自定义脚本为nodejs语言编写的脚本，可以操作并增删改查主项目配置文件，但对于部分文件仅有修改的权限，比如Android项目中的build.gradle，iOS项目中的info.plist文件。

3.组件调试方法：

3.1、组件在开发过程中可能需要断点调试及功能测试，本专利提供了生成调试项目的方法。

3.2、开发者在组件目录执行组件调试的命令，即可生成调试项目，调试项目为完整的Android、iOS原生开发项目，开发者可以通过AndroidStudio、Xcode等工具运行并调试。

3.3、生成的Android、iOS原生开发项目，经过ReactNative的bundle的编译，并根据(1.7)中所述组件声明配置文件，依赖组件项目android、ios文件夹下的库项目，且组件调试的命令还会调用(2.2)中所述的组件脚本，以做到开发模式和最终生产发布模式下集成逻辑相同。

3.4、组件调试的命令还会生成ReactNative前端项目，并提供一个初始页面，开发者可以在该项目下调用组件中的方法进行调试和验证。

3.5、(3.3)中所述原生开发项目不但可以用于开发，也可以通过打包生成最终的生产包apk和ipa，做到对生产模式下组件功能的验证。

4.组件发布：

4.1、组件在调试及验证完成后，由于本身也是标准的npm包，所以可以选择发布到npm仓库。

4.2、组件在发布前可以选择组件发布的模式，源码发布和依赖包介质发布。

4.3、(4.2)中所述源码发布指的是直接将组件目录下android、ios文件夹中的源码打包进npm包中并发布，这样主项目在使用组件的时候以项目依赖的方式直接依赖。好处是开发时与发布时运行环境完全一致，开发者无需担心开发阶段调通的接口在最终打包时无法使用。

4.4、(4.2)中所述的依赖包介质发布指的是将android、ios文件夹下的源码打包成aar/pom和framework/podspec文件的形式，即将Android和iOS的库项目打包成产物，而最终发布的时候只会将这些产物发布到npm包中。这样做的好处则是可以保护组件的源码，并且在主项目打包过程中，由于依赖的是库项目的打包产物，打包速度也会大幅增加。

4.5、组件npm包的发布可以选择发布到npm私库，也可以发布到公网npmjs中，同时也会发布到组件中心服务。

4.6、(4.5)所述组件中心服务指已发布的组件的管理模块，详见章节5。

5.组件管理：

5.1、组件管理依托于组件中心服务，组件在发布时需要将组件发布到组件中心。

5.2、组件中心提供组件查看界面、组件发布、组件审核功能。

5.3、组件发布上传后，由管理人员审核后才能发布，发布后的组件才可以被查看访问到。

5.4、组件查看界面可以查看、搜索、筛选组件，根据特定条件查询组件，并查看指定组件的基础信息、开发文档、历史版本等数据。

6.组件使用：

6.1、组件发布到组件中心后，开发者可以通过组件中心的服务查看当前已发布组件，包括组件信息、组件支持平台、组件历史版本等。

6.2、开发者可以在组件配置页面看到所有的已发布的组件列表，并通过勾选的方式选择需要使用的组件，同时填写组件的要求的参数，包括三方sdk的appId、需要的权限申请提示语、推送环境、应用scheme等。

6.3、开发者勾选并配置完组件参数后，即可在项目中使用该组件，并提供代码提示功能。

6.4、开发者选择组件后，可以直接进行编译Android、iOS调试包和生产包，并在调试包中进行项目的开发与调试，在生产包中验证打包后组件的功能。

在项目开发的应用实例中，会发现很多功能都可以在多个场景复用或在应用运行中动态变化，那么这块功能就可以封装为组件，以配置组件的方式在不同的项目或不同的场景中使用。本技术方案提供在ReactNative中实现组件扩展及项目组件化管理的方法，为ReactNative项目提供一种新的组件扩展的方式。接下来以扩展原生Toast提示的功能为例，详细介绍此方法。

1.创建组件：

1.1、本专利所述组件也是以npm包形式存在，其中包括组件的android、ios及js实现部分，还有组件声明配置文件及组件脚本部分。

1.2、首先通过npm命令创建组件目录，并创建android、ios、js、scripts文件夹、package.json、和组件配置文件pluginConfig.json，见附图2。

1.3、进入android文件夹创建Android库项目，进入ios文件夹创建iOS库项目。

1.4、android、ios及js实现部分为组件功能的实现代码，其中主要为Java、Object-C、JavaScript语言实现，并按照ReactNative要求的实现规范进行编写，做到原生与ReactNative层的交互及通信。

1.5、其中android文件夹中为Android库项目，可以单独作为库项目供主项目依赖，也可以单独编译成Android库项目的产物aar包。

1.6、其中ios文件夹中为iOS库项目，需要提供对应podspec文件，其中声明了该库项目的名称、版本等关键信息。该iOS库项目可以直接被主项目以pod方式依赖，也可以单独编译成为iOS库项目产物framework。

1.7、其中组件声明配置文件中声明了组件名、版本号、描述等基础信息，也声明了Android的ReactNative扩展类名、混淆配置、依赖处理、需要申请的权限、自定义属性占位符等信息，也声明了iOS的ReactNative扩展类名、posspec文件相对路径、需要申请的权限及权限描述、自定义属性占位符等信息。

1.8、其中组件脚本部分为js项目，可以调用预设的文件操作命令，以便在编译时修改主项目配置，增删改查部分文件，做到组件主动修改主项目，做到无需在集成组件后再去手动修改主项目的效果。

2.组件扩展方法：

2.1、组件在扩展是遵守ReactNative要求的实现规范。Android中需要实现ReactPackage类方法，并创建ReactModule，在其中实现业务逻辑。iOS中需要继承RCTBridgeModule类，并将编写的方法导出。如下所示：

@ReactMethod

public void showToast(String info){

}

RCT_EXPORT_METHOD(showToast:(NSString*)info){

}

2.2、组件在编写组件脚本部分时，可以调用预设命令，也可以开发自定义脚本。

2.3、(2.2)中所述预设命令包括设置Android中placeholder的值、设置iOS中plist的自定义key/value、设置Android混淆配置、设置自定义依赖、增加项目maven仓库、修改项目build.gradle文件、修改项目manifest.xml文件、修改iOS项目scheme、修改iOS项目编译配置、修改iOS项目后台功能等能力。配置混淆如下所示：

"proguardRules":"-keep class com.component.mytoast.**{*；}"

2.4、(2.2)中所述自定义脚本为nodejs语言编写的脚本，可以操作并增删改查主项目配置文件，但对于部分文件仅有修改的权限，比如Android项目中的build.gradle，iOS项目中的info.plist文件。

3.组件调试方法：

3.1、组件在开发过程中可能需要断点调试及功能测试，本专利提供了生成调试项目的方法。

3.2、开发者在组件目录执行组件调试的命令，即可生成调试项目，调试项目为完整的Android、iOS原生开发项目，开发者可以通过AndroidStudio、Xcode等工具运行并调试。

3.3、生成的Android、iOS原生开发项目，经过ReactNative的bundle的编译，并根据(1.7)中所述组件声明配置文件，依赖组件项目android、ios文件夹下的库项目，且组件调试的命令还会调用(2.2)中所述的组件脚本，以做到开发模式和最终生产发布模式下集成逻辑相同。

3.4、组件调试的命令还会生成ReactNative前端项目，并提供一个初始页面，开发者可以在该项目下调用组件中的方法进行调试和验证。

3.5、(3.3)中所述原生开发项目不但可以用于开发，也可以通过打包生成最终的生产包apk和ipa，做到对生产模式下组件功能的验证。

4.组件发布：

4.1、组件在调试及验证完成后，由于本身也是标准的npm包，所以可以选择发布到npm仓库。

4.2、组件在发布前可以选择组件发布的模式，源码发布和依赖包介质发布。

4.3、(4.2)中所述源码发布指的是直接将组件目录下android、ios文件夹中的源码打包进npm包中并发布，这样主项目在使用组件的时候以项目依赖的方式直接依赖。好处是开发时与发布时运行环境完全一致，开发者无需担心开发阶段调通的接口在最终打包时无法使用。

4.4、(4.2)中所述的依赖包介质发布指的是将android、ios文件夹下的源码打包成aar/pom和framework/podspec文件的形式，即将Android和iOS的库项目打包成产物，而最终发布的时候只会将这些产物发布到npm包中。这样做的好处则是可以保护组件的源码，并且在主项目打包过程中，由于依赖的是库项目的打包产物，打包速度也会大幅增加。

4.5、组件npm包的发布可以选择发布到npm私库，也可以发布到公网npmjs中，同时也会发布到组件中心服务。

4.6、(4.5)所述组件中心服务指已发布的组件的管理模块，详见章节5。

5.组件管理：

5.1、组件管理依托于组件中心服务，组件在发布时需要将组件发布到组件中心。

5.2、组件中心提供组件查看界面、组件发布、组件审核功能。

5.3、组件发布上传后，由管理人员审核后才能发布，发布后的组件才可以被查看访问到。

5.4、组件查看界面可以查看、搜索、筛选组件，根据特定条件查询组件，并查看指定组件的基础信息、开发文档、历史版本等数据。

6.组件使用：

6.1、组件发布到组件中心后，开发者可以通过组件中心的服务查看当前已发布组件，包括组件信息、组件支持平台、组件历史版本等。

6.2、开发者可以在组件配置页面看到所有的已发布的组件列表，并通过勾选的方式选择需要使用的组件，同时填写组件的要求的参数，包括三方sdk的appId、需要的权限申请提示语、推送环境、应用scheme等。

6.3、开发者勾选并配置完组件参数后，即可在项目中使用该组件，并提供代码提示功能。

6.4、开发者选择组件后，可以直接进行编译Android、iOS调试包和生产包，并在调试包中进行项目的开发与调试，在生产包中验证打包后组件的功能。

采用了本发明的基于ReactNative实现组件扩展和管理的方法，实现了在ReactNative更方便进行组件的编写，还提供了组件脚本方法，从而解决了组件使用时需要开发者进行繁琐配置的问题，实现了通过选择组件填写参数而无需其他配置就可以直接使用；还提供了组件打包发布的方法，支持只发布组件打包产物而非源码；由于提供了组件发布与管理方法，从而做到了更方便地浏览与选用组件。

在此说明书中，本发明已参照其特定的实施例作了描述。但是，很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此，说明书和附图应被认为是说明性的而非限制性的。

Claims (8)

1.一种基于ReactNative实现组件扩展和管理的方法，其特征在于，所述的方法包括以下步骤：

(1)进行组件定义；

(2)通过调用预设命令或开发自定义脚本来编写组件脚本；

(3)对组件进行断点调试及功能测试；

(4)选择组件的发布模式，并发布至npm仓库，其中，所述的组件的发布模式包括源码发布和依赖包介质发布；

(5)通过组件中心的服务进行组件管理；

(6)填写组件要求的参数，使用组件；

所述的步骤(1)的进行组件定义具体为通过原生代码编写视图或开发功能，并通过JavaScript调用；其中，组件为npm包的形式，包括组件的android模块、ios模块和js模块，以及组件声明配置文件和组件脚本部分；

所述的步骤(3)具体包括以下步骤：

在组件目录执行组件调试的命令，生成调试项目，通过工具运行并调试；

生成Android及iOS的原生开发项目，经过bundle编译，并根据组件声明配置文件，依赖android模块和ios模块的库项目，调用组件脚本，使开发模式和生产发布模式下的集成逻辑相同；

生成ReactNative前端项目，并提供初始页面，进行调试和验证；

所述的原生开发项目用于开发，以及打包生成最终的生产包apk和ipa，对生产模式下组件功能进行验证。

2.根据权利要求1所述的基于ReactNative实现组件扩展和管理的方法，其特征在于，所述的android模块为Android库项目，作为库项目供主项目依赖，或编译成Android库项目的产物aar包；

所述的ios模块为iOS库项目，包括项目的名称、版本的信息，所述的ios模块直接被主项目以pod方式依赖，或单独编译成为iOS库项目产物framework；

所述的组件声明配置文件包括组件名、版本号、描述的信息，还包括android模块的ReactNative扩展类名、混淆配置、依赖处理、需要申请的权限、自定义属性占位符的信息，还包括ios模块的ReactNative扩展类名、posspec文件相对路径、需要申请的权限及权限描述、自定义属性占位符的信息；

所述的组件脚本部分为js项目，调用预设的文件操作命令，在编译中修改主项目配置，增删改查部分文件。

3.根据权利要求1所述的基于ReactNative实现组件扩展和管理的方法，其特征在于，所述的预设命令包括设置Android中placeholder的值、设置iOS中plist的自定义key/value、设置Android混淆配置、设置自定义依赖、增加项目maven仓库、修改项目build.gradle文件、修改项目manifest.xml文件、修改iOS项目scheme、修改iOS项目编译配置以及修改iOS项目后台功能。

4.根据权利要求1所述的基于ReactNative实现组件扩展和管理的方法，其特征在于，所述的自定义脚本为通过nodejs语言编写的脚本，用于操作并增删改查主项目配置文件。

5.根据权利要求1所述的基于ReactNative实现组件扩展和管理的方法，其特征在于，所述的步骤(4)的源码发布为将组件目录下android模块和ios模块的源码打包进npm包中并发布；

所述的步骤(4)的依赖包介质发布为将android模块和ios模块的源码打包成aar/pom和framework/podspec文件的形式，将Android和iOS的库项目打包成产物，发布时发布至npm包中。

6.根据权利要求1所述的基于ReactNative实现组件扩展和管理的方法，其特征在于，所述的步骤(4)中组件npm包发布至npm私库、公网npmjs或组件中心服务。

7.根据权利要求1所述的基于ReactNative实现组件扩展和管理的方法，其特征在于，所述的步骤(5)通过组件中心的服务提供组件查看界面、组件发布和组件审核功能，所述的组件查看界面进行查看、搜索和筛选组件，根据特定条件查询组件，并查看指定组件的基础信息、开发文档和历史版本的数据。

8.根据权利要求1所述的基于ReactNative实现组件扩展和管理的方法，其特征在于，所述的步骤(1)具体包括以下步骤：

在组件配置页面查看所有的已发布的组件列表，并通过勾选的方式选择需要使用的组件，同时填写组件要求的参数，在项目中使用组件，并提供代码提示功能。