diff --git a/en/react-native-splash-screen.md b/en/react-native-splash-screen.md
index 1664d3caa6c881f65e073345934d0e19faa0f092..195ee1733dfb1d7b839049f18211e6a088887d87 100644
--- a/en/react-native-splash-screen.md
+++ b/en/react-native-splash-screen.md
@@ -1,40 +1,34 @@
-> Template version: v0.2.2
+> Template version: v0.3.0
react-native-splash-screen
-
-
-
-
-
-
-
-
-> [!TIP] [Github address](https://github.com/react-native-oh-library/react-native-splash-screen)
+This project is based on [react-native-splash-screen@3.3.0](https://github.com/crazycodeboy/react-native-splash-screen).
-## Installation and Usage
+This third-party library has been migrated to Gitee and is now available for direct download from npm, the new package name is: `@react-native-ohos/react-native-splash-screen`, The version correspondence details are as follows:
-Find the matching version information in the release address of a third-party library: [@react-native-oh-tpl/react-native-splash-screen Releases](https://github.com/react-native-oh-library/react-native-splash-screen/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package.
+| Version | Package Name | Repository | Release |
+|---------------------------| ------------------------------------------------- | ------------------ | -------------------------- |
+| <= 3.3.0-0.0.2@deprecated | @react-native-oh-tpl/react-native-splash-screen | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-splash-screen) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-splash-screen/releases) |
+| > 3.3.0 | @react-native-ohos/react-native-splash-screen | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-splash-screen) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-splash-screen/releases) |
+## 1. Installation and Usage
Go to the project directory and execute the following instruction:
-
-
#### **npm**
```bash
-npm install @react-native-oh-tpl/react-native-splash-screen
+npm install @react-native-ohos/react-native-splash-screen
```
#### **yarn**
```bash
-yarn add @react-native-oh-tpl/react-native-splash-screen
+yarn add @react-native-ohos/react-native-splash-screen
```
@@ -47,7 +41,7 @@ The following code shows the basic use scenario of the repository:
##### **Create a launch page `SplashScreenPage.ets` in the entry/src/main/ets/pages directory**
```ets
-import { SplashScreenView } from '@react-native-oh-tpl/react-native-splash-screen/src/main/ets/SplashScreenView'
+import { SplashScreenView } from '@react-native-ohos/react-native-splash-screen/src/main/ets/SplashScreenView'
@Entry
@Component
@@ -60,7 +54,7 @@ export struct SplashScreenPage {
}
```
-##### **Add `pages/SplashScreenPage` in entry/src/resources/base/profile/main_pages.json **
+##### **Add `pages/SplashScreenPage` in entry/src/resources/base/profile/main_pages.json**
```json
{
"src": [
@@ -69,10 +63,10 @@ export struct SplashScreenPage {
}
```
-##### **Open the `entry/src/main/ets/entryability/EntryAbility.ets` file and add the following code: **
+##### **Open the `entry/src/main/ets/entryability/EntryAbility.ets` file and add the following code:**
```ets
import window from '@ohos.window';
-import { SplashScreen } from '@react-native-oh-tpl/react-native-splash-screen/src/main/ets/SplashScreen'
+import { SplashScreen } from '@react-native-ohos/react-native-splash-screen/src/main/ets/SplashScreen'
export default class EntryAbility extends RNAbility {
onWindowStageCreate(windowStage: window.WindowStage): void {
@@ -96,31 +90,34 @@ export default class WelcomePage extends Component {
}
```
-## Use Codegen
+## 2. Manual Link
-This repository has been adapted to `Codegen`, generate the bridge code of the third-party library by using the `Codegen`. For details, see [Codegen Usage Guide](/en/codegen.md).
+This step provides guidance for manually configuring native dependencies.
-## Link
+Open the `harmony` directory of the HarmonyOS project in DevEco Studio.
-Currently, HarmonyOS does not support AutoLink. Therefore, you need to manually configure the linking.
+### 2.1. Overrides RN SDK
-Open the `harmony` directory of the HarmonyOS project in DevEco Studio.
+To ensure the project relies on the same version of the RN SDK, you need to add an `overrides` field in the project's root `oh-package.json5` file, specifying the RN SDK version to be used. The replacement version can be a specific version number, a semver range, or a locally available HAR package or source directory.
-### 1. Adding the overrides Field to oh-package.json5 File in the Root Directory of the Project
+For more information about the purpose of this field, please refer to the [official documentation](https://developer.huawei.com/consumer/en/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#en-us_topic_0000001792256137_overrides).
```json
{
- ...
"overrides": {
- "@rnoh/react-native-openharmony" : "./react_native_openharmony"
+ "@rnoh/react-native-openharmony": "^0.72.38" // ohpm version
+ // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // a locally available HAR package
+ // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // source code directory
}
}
```
-### 2. Introducing Native Code
+### 2.2. Introducing Native Code
Currently, two methods are available:
+- Use the HAR file.
+- Directly link to the source code。
Method 1 (recommended): Use the HAR file.
@@ -130,8 +127,7 @@ Open `entry/oh-package.json5` file and add the following dependencies:
```json
"dependencies": {
- "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
- "@react-native-oh-tpl/react-native-splash-screen": "file:../../node_modules/@react-native-oh-tpl/react-native-splash-screen/harmony/splash_screen.har"
+ "@react-native-ohos/react-native-splash-screen": "file:../../node_modules/@react-native-ohos/react-native-splash-screen/harmony/splash_screen.har"
}
```
@@ -148,13 +144,46 @@ Method 2: Directly link to the source code.
> [!TIP] For details, see [Directly Linking Source Code](/en/link-source-code.md).
-### 3. Introducing SplashScreenPackage to ArkTS
+### 2.3. Configuring CMakeLists and Introducing SplashScreenPackage
+
+Open `entry/src/main/cpp/CMakeLists.txt` and add the following code:
+
+```diff
++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
+
+# RNOH_BEGIN: manual_package_linking_1
++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-splash-screen/src/main/cpp" ./splash_screen))
+# RNOH_END: manual_package_linking_1
+
+# RNOH_BEGIN: manual_package_linking_2
++ target_link_libraries(rnoh_app PUBLIC rnoh_splash_screen)
+# RNOH_END: manual_package_linking_2
+```
+
+Open `entry/src/main/cpp/PackageProvider.cpp` and add the following code:
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "generated/RNOHGeneratedPackage.h"
++ #include "SplashScreenPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx),
+ };
+}
+```
+
+### 2.4. Introducing SplashScreenPackage to ArkTS
Open the `entry/src/main/ets/RNPackagesFactory.ts` file and add the following code:
```diff
...
-+ import {SplashScreenPackage} from '@react-native-oh-tpl/react-native-splash-screen/ts';
++ import {SplashScreenPackage} from '@react-native-ohos/react-native-splash-screen/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
@@ -164,7 +193,7 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
}
```
-### 5. Running
+### 2.5. Running
Click the `sync` button in the upper right corner.
@@ -177,27 +206,24 @@ ohpm install
Then build and run the code.
-## Constraints
-
-### Compatibility
-
-To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone.
+## 3. Constraints
-Check the release version information in the release address of the third-party library: [@react-native-oh-tpl/react-native-splash-screen Releases](https://github.com/react-native-oh-library/react-native-splash-screen/releases)
+### 3.1. Compatibility
+Check the release version information in the release address of the third-party library: [@react-native-ohos/react-native-splash-screen Releases](https://gitee.com/openharmony-sig/rntpc_react-native-splash-screen/releases)
-## API
+## 4. API
> [!TIP] The **Platform** column indicates the platform where the properties are supported in the original third-party library.
> [!TIP] If the value of **HarmonyOS Support** is **yes**, it means that the HarmonyOS platform supports this property; **no** means the opposite; **partially** means some capabilities of this property are supported. The usage method is the same on different platforms and the effect is the same as that of iOS or Android.
-Name | Description | Type | Required | Platform | HarmonyOS Support
--- | -- | -- | -- | -- | --
-show() | 显示启动屏幕(原生方法) | function | Yes | iOS | No
-show(abilityContext: UIAbilityContext, windowStage: window.WindowStage, iconResource: any, backgroundColor: string, pageUrl: string) | 显示启动屏幕(原生方法) | function | Yes | iOS/Android | Yes
-hide() | 隐藏启动屏幕 | function | Yes | iOS/Android | Yes
+| Name | Description | Type | Required | Platform | HarmonyOS Support|
+|--------------------------------------------------------------------------------------------------------------------------------------| ----- | ----- | ----- | ----- | -----|
+|show() | 显示启动屏幕(原生方法) | function | Yes | iOS | No |
+|show(abilityContext: UIAbilityContext, windowStage: window.WindowStage, iconResource: any, backgroundColor: string, pageUrl: string) | 显示启动屏幕(原生方法) | function | Yes | iOS/Android | Yes |
+| hide() | 隐藏启动屏幕 | function | Yes | iOS/Android | Yes |
> [!TIP] **show(abilityContext: UIAbilityContext, windowStage: window.WindowStage, iconResource: any, backgroundColor: string, pageUrl: string) 方法的参数说明:**
@@ -210,13 +236,13 @@ hide() | 隐藏启动屏幕 | function | Yes | iOS/Android | Yes
| backgroundColor | 启动页背景色 | string |
| pageUrl | 首页路由 | bool |
-## Known Issues
+## 5. Known Issues
-## Others
+## 6. Others
-在 iOS 中,show() 方法的工作原理是: 在入口 application 方法中,首先加载 App 首页,然后使用 while 循环让界面停留在 App 启动屏,此时首页仍然会异步加载,加载完成后,停止 while 循环即可隐藏启动屏,显示首页。
+- 在 iOS 中,show() 方法的工作原理是: 在入口 application 方法中,首先加载 App 首页,然后使用 while 循环让界面停留在 App 启动屏,此时首页仍然会异步加载,加载完成后,停止 while 循环即可隐藏启动屏,显示首页。
HarmonyOS 中,在入口 onWindowStageCreate 中调用 windowStage.loadContent 加载首页,如果此时使用 while 循环,首页无法异步加载。
-## License
+## 7.License
-This project is licensed under [The MIT License (MIT)](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/LICENSE).
\ No newline at end of file
+This project is licensed under [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_react-native-splash-screen/blob/master/LICENSE).
\ No newline at end of file
diff --git a/zh-cn/react-native-splash-screen.md b/zh-cn/react-native-splash-screen.md
index 829db5fcf5b29838dcce54246f16711809a43b4e..467b052c246013969e92423a39f3b25c5d0b8375 100644
--- a/zh-cn/react-native-splash-screen.md
+++ b/zh-cn/react-native-splash-screen.md
@@ -1,23 +1,19 @@
-> 模板版本:v0.2.2
+> 模板版本:v0.3.0
react-native-splash-screen
-
-
-
-
-
-
-
-
-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-splash-screen)
+本项目基于 [react-native-splash-screen@3.3.0](https://github.com/crazycodeboy/react-native-splash-screen) 开发。
-## 安装与使用
+该第三方库的仓库已迁移至 Gitee,且支持直接从 npm 下载,新的包名为:`@react-native-ohos/react-native-splash-screen`,具体版本所属关系如下:
-请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-splash-screen Releases](https://github.com/react-native-oh-library/react-native-splash-screen/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。
+| Version | Package Name | Repository | Release |
+|---------------------------| ------------------------------------------------- | ------------------ | -------------------------- |
+| <= 3.3.0-0.0.2@deprecated | @react-native-oh-tpl/react-native-splash-screen | [Github(deprecated)](https://github.com/react-native-oh-library/react-native-splash-screen) | [Github Releases(deprecated)](https://github.com/react-native-oh-library/react-native-splash-screen/releases) |
+| > 3.3.0 | @react-native-ohos/react-native-splash-screen | [Gitee](https://gitee.com/openharmony-sig/rntpc_react-native-splash-screen) | [Gitee Releases](https://gitee.com/openharmony-sig/rntpc_react-native-splash-screen/releases) |
+## 1. 安装与使用
进入到工程目录并输入以下命令:
@@ -26,13 +22,13 @@
#### **npm**
```bash
-npm install @react-native-oh-tpl/react-native-splash-screen
+npm install @react-native-ohos/react-native-splash-screen
```
#### **yarn**
```bash
-yarn add @react-native-oh-tpl/react-native-splash-screen
+yarn add @react-native-ohos/react-native-splash-screen
```
@@ -45,7 +41,7 @@ yarn add @react-native-oh-tpl/react-native-splash-screen
##### **在 entry/src/main/ets/pages 目录下新建启动页SplashScreenPage.ets**
```ets
-import { SplashScreenView } from '@react-native-oh-tpl/react-native-splash-screen/src/main/ets/SplashScreenView'
+import { SplashScreenView } from '@react-native-ohos/react-native-splash-screen/src/main/ets/SplashScreenView'
@Entry
@Component
@@ -70,7 +66,7 @@ export struct SplashScreenPage {
##### **在 entry/src/main/ets/entryability/EntryAbility.ets 内添加**
```ets
import window from '@ohos.window';
-import { SplashScreen } from '@react-native-oh-tpl/react-native-splash-screen/src/main/ets/SplashScreen'
+import { SplashScreen } from '@react-native-ohos/react-native-splash-screen/src/main/ets/SplashScreen'
export default class EntryAbility extends RNAbility {
onWindowStageCreate(windowStage: window.WindowStage): void {
@@ -94,33 +90,34 @@ export default class WelcomePage extends Component {
}
```
-## 使用 Codegen
+## 2. Manual Link
-本库已经适配了 `Codegen` ,在使用前需要主动执行生成三方库桥接代码,详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。
+此步骤为手动配置原生依赖项的指导。
-## Link
+首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`。
-目前鸿蒙暂不支持 AutoLink,所以 Link 步骤需要手动配置。
+### 2.1. Overrides RN SDK
-首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony`
+为了让工程依赖同一个版本的 RN SDK,需要在工程根目录的 `oh-package.json5` 添加 overrides 字段,指向工程需要使用的 RN SDK 版本。替换的版本既可以是一个具体的版本号,也可以是一个模糊版本,还可以是本地存在的 HAR 包或源码目录。
-### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段
+关于该字段的作用请阅读[官方说明](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-oh-package-json5-V5#zh-cn_topic_0000001792256137_overrides)
```json
{
- ...
"overrides": {
- "@rnoh/react-native-openharmony" : "./react_native_openharmony"
+ "@rnoh/react-native-openharmony": "^0.72.38" // ohpm 在线版本
+ // "@rnoh/react-native-openharmony" : "./react_native_openharmony.har" // 指向本地 har 包的路径
+ // "@rnoh/react-native-openharmony" : "./react_native_openharmony" // 指向源码路径
}
}
```
-### 2.引入原生端代码
+### 2.2. 引入原生端代码
目前有两种方法:
-1. 通过 har 包引入(在 IDE 完善相关功能后该方法会被遗弃,目前首选此方法);
-2. 直接链接源码。
+- 通过 har 包引入;
+- 直接链接源码。
方法一:通过 har 包引入(推荐)
@@ -130,14 +127,13 @@ export default class WelcomePage extends Component {
```json
"dependencies": {
- "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
- "@react-native-oh-tpl/react-native-splash-screen": "file:../../node_modules/@react-native-oh-tpl/react-native-splash-screen/harmony/splash_screen.har"
+ "@react-native-ohos/react-native-splash-screen": "file:../../node_modules/@react-native-ohos/react-native-splash-screen/harmony/splash_screen.har"
}
```
点击右上角的 `sync` 按钮
-或者在终端执行:
+或者在命令行终端执行:
```bash
cd entry
@@ -147,14 +143,48 @@ ohpm install
方法二:直接链接源码
> [!TIP] 如需使用直接链接源码,请参考[直接链接源码说明](/zh-cn/link-source-code.md)
+>
+### 2.3. 配置 CMakeLists 和引入 SplashScreenPackage
+
+打开 entry/src/main/cpp/CMakeLists.txt,添加:
+```diff
+ ...
++ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
+
+# RNOH_BEGIN: manual_package_linking_1
++ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-splash-screen/src/main/cpp" ./splash_screen)
+# RNOH_END: manual_package_linking_1
+
+# RNOH_BEGIN: manual_package_linking_2
++ target_link_libraries(rnoh_app PUBLIC rnoh_splash_screen)
+# RNOH_END: manual_package_linking_2
+
+```
+
+打开 entry/src/main/cpp/PackageProvider.cpp,添加:
+
+```diff
+#include "RNOH/PackageProvider.h"
+#include "generated/RNOHGeneratedPackage.h"
++ #include "SplashScreenPackage.h"
+
+using namespace rnoh;
+
+std::vector> PackageProvider::getPackages(Package::Context ctx) {
+ return {
+ std::make_shared(ctx),
++ std::make_shared(ctx)
+ };
+}
+```
-### 3.在 ArkTs 侧引入 SplashScreenPackage
+### 2.4. 在 ArkTs 侧引入 SplashScreenPackage
打开 `entry/src/main/ets/RNPackagesFactory.ts`,添加:
```diff
...
-+ import {SplashScreenPackage} from '@react-native-oh-tpl/react-native-splash-screen/ts';
++ import {SplashScreenPackage} from '@react-native-ohos/react-native-splash-screen/ts';
export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
return [
@@ -164,11 +194,11 @@ export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
}
```
-### 5.运行
+### 2.5. 运行
点击右上角的 `sync` 按钮
-或者在终端执行:
+或者在命令行终端执行:
```bash
cd entry
@@ -178,27 +208,27 @@ ohpm install
然后编译、运行即可。
-## 约束与限制
+## 3. 约束与限制
-### 兼容性
+### 3.1. 兼容性
要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。
-请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-tpl/react-native-splash-screen Releases](https://github.com/react-native-oh-library/react-native-splash-screen/releases)
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-ohos/react-native-splash-screen Releases](https://gitee.com/openharmony-sig/rntpc_react-native-splash-screen/releases)
-## API
+## 4. API
> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
-Name | Description | Type | Required | Platform | HarmonyOS Support
--- | -- | -- | -- | -- | --
-show() | 显示启动屏幕(原生方法) | function | Yes | iOS | No
-show(abilityContext: UIAbilityContext, windowStage: window.WindowStage, iconResource: any, backgroundColor: string, pageUrl: string) | 显示启动屏幕(原生方法) | function | Yes | iOS/Android | Yes
-hide() | 隐藏启动屏幕 | function | Yes | iOS/Android | Yes
+|Name | Description | Type | Required | Platform | HarmonyOS Support|
+|----- | ----- | ----- | ----- | ----- | -----|
+|show() | 显示启动屏幕(原生方法) | function | Yes | iOS | No |
+|show(abilityContext: UIAbilityContext, windowStage: window.WindowStage, iconResource: any, backgroundColor: string, pageUrl: string) | 显示启动屏幕(原生方法) | function | Yes | iOS/Android | Yes|
+| hide() | 隐藏启动屏幕 | function | Yes | iOS/Android | Yes |
> [!TIP] **show(abilityContext: UIAbilityContext, windowStage: window.WindowStage, iconResource: any, backgroundColor: string, pageUrl: string) 方法的参数说明:**
@@ -211,13 +241,13 @@ hide() | 隐藏启动屏幕 | function | Yes | iOS/Android | Yes
| backgroundColor | 启动页背景色 | string |
| pageUrl | 首页路由 | bool |
-## 遗留问题
+## 5. 遗留问题
-## 其他
+## 6. 其他
-在 iOS 中,show() 方法的工作原理是: 在入口 application 方法中,首先加载 App 首页,然后使用 while 循环让界面停留在 App 启动屏,此时首页仍然会异步加载,加载完成后,停止 while 循环即可隐藏启动屏,显示首页。
+- 在 iOS 中,show() 方法的工作原理是: 在入口 application 方法中,首先加载 App 首页,然后使用 while 循环让界面停留在 App 启动屏,此时首页仍然会异步加载,加载完成后,停止 while 循环即可隐藏启动屏,显示首页。
HarmonyOS 中,在入口 onWindowStageCreate 中调用 windowStage.loadContent 加载首页,如果此时使用 while 循环,首页无法异步加载。
-## 开源协议
+## 7. 开源协议
-本项目基于 [The MIT License (MIT)](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/LICENSE) ,请自由地享受和参与开源。
\ No newline at end of file
+本项目基于 [The MIT License (MIT)](https://gitee.com/openharmony-sig/rntpc_react-native-splash-screen/blob/master/LICENSE) ,请自由地享受和参与开源。
\ No newline at end of file