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

-

- - Supported platforms - - - License - -

-> [!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

-

- - Supported platforms - - - License - -

-> [!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