From 822fcb42c9459d710e335813ec41ed2a8247c5fa Mon Sep 17 00:00:00 2001 From: xiawenqiang Date: Mon, 3 Jun 2024 10:59:19 +0800 Subject: [PATCH 1/4] =?UTF-8?q?docs:=20[Issues:=20#I9TF6U]=20=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=20react-native-splash-screen=20=E6=8C=87=E5=AF=BC?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-splash-screen.md | 166 ++++++++++++++++++++++++++++ 1 file changed, 166 insertions(+) create mode 100644 zh-cn/react-native-splash-screen.md diff --git a/zh-cn/react-native-splash-screen.md b/zh-cn/react-native-splash-screen.md new file mode 100644 index 00000000..f5a7663c --- /dev/null +++ b/zh-cn/react-native-splash-screen.md @@ -0,0 +1,166 @@ +> 模板版本：v0.2.1 + +

+

react-native-splash-screen

+

+

+ + Supported platforms + + + License + +

+ +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/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)，并下载适用版本的 tgz 包。 + + +进入到工程目录并输入以下命令： + +> [!TIP] # 处替换为 tgz 包的路径 + + + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-splash-screen@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-splash-screen@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + + +## 安装说明 + +### 第一步(下载): +在项目根目录打开终端运行： + + `npm i @react-native-oh-tpl/react-native-splash-screen --save` + +### 第二步 (安装): +终端运行： + +`react-native link @react-native-oh-tpl/react-native-splash-screen` 或 `rnpm link @react-native-oh-tpl/react-native-splash-screen` + +### 第三步(配置): + +1. 新建启动页SplashScreenPage.ets，代码如下： + +```js +import { SplashScreen } from '@react-native-oh-tpl/react-native-splash-screen/src/main/ets/SplashScreenView' + +@Component +export struct SplashScreenPage { + build() { + Row() { + SplashScreenView(); + } + } +} +``` + +2. main_pages.json 内添加 `SplashScreenPage`，代码如下： +```js +{ + "src": [ + "pages/SplashScreenPage" + ] +} +``` + +3. 修改EntryAbility.ets，添加如下代码： +```js +import { SplashScreen } from '@react-native-oh-tpl/react-native-splash-screen/src/main/ets/SplashScreen' + +onWindowStageCreate(windowStage: window.WindowStage): void { + let startWindowIcon = $r('app.media.splashIcon'); // 启动页图片 + let startWindowBackground = "#FFFFFF"; // 启动页背景色 + let startPageUrl = 'pages/SplashScreenPage'; // 启动页 + SplashScreen.show(this.context, windowStage, startWindowIcon, startWindowBackground, startPageUrl).then(() => { + super.onWindowStageCreate(windowStage); + }) +} +``` + +## 使用说明 + +将 `react-native-splash-screen` 导入你的JS 文件； +在适当的时候关闭启动屏幕（如：启动初始化完成后）: + +```JavaScript +import SplashScreen from '@react-native-oh-tpl/react-native-splash-screen/src/RNSplashScreenModule'; + +export default class WelcomePage extends Component { + + componentDidMount() { + SplashScreen.hide(); // 关闭启动屏幕 + } +} +``` + + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[Releases](https://github.com/react-native-oh-library/react-native-splash-screen/releases) + +本文档内容基于以下版本验证通过： + +1. RNOH: 0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + + +## 方法 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + + +Name | Description | Type | Required | HarmonyOS Support +-- | -- | -- | -- | -- +show() | 打开启动屏幕(原生方法) | Function | Yes | Yes | +hide() | 关闭启动屏幕 | Function | Yes | Yes | + + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +**show()** 方法的参数 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | ----------------- | +| abilityContext | 应用上下文 | UIAbilityContext | Yes | HarmonyOS | Yes | +| windowStage | 窗口管理器 | window.WindowStage | Yes | HarmonyOS | Yes | +| iconResource | 启动页图片 | Resource | Yes | HarmonyOS | Yes | +| backgroundColor | 启动页背景色 | string | Yes | HarmonyOS | Yes | +| pageUrl | 首页路由 | bool | Yes | HarmonyOS | Yes | + + +## 遗留问题 + + +## 其他 + +## 开源协议 + +本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-splash-screen/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file -- Gitee From 462ae299b1fae3149af5f870e289cf69ad699cf2 Mon Sep 17 00:00:00 2001 From: xiawenqiang Date: Thu, 13 Jun 2024 11:32:26 +0800 Subject: [PATCH 2/4] =?UTF-8?q?docs:=20[Issues:=20#I9TF6U]=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20react-native-splash-screen=20=E6=8C=87=E5=AF=BC?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-splash-screen.md | 112 ++++++++++++++++++++-------- 1 file changed, 82 insertions(+), 30 deletions(-) diff --git a/zh-cn/react-native-splash-screen.md b/zh-cn/react-native-splash-screen.md index f5a7663c..08f5ee4d 100644 --- a/zh-cn/react-native-splash-screen.md +++ b/zh-cn/react-native-splash-screen.md @@ -44,25 +44,10 @@ yarn add @react-native-oh-tpl/react-native-splash-screen@file:# > [!WARNING] 使用时 import 的库名不变。 -## 安装说明 - -### 第一步(下载): -在项目根目录打开终端运行： - - `npm i @react-native-oh-tpl/react-native-splash-screen --save` - -### 第二步 (安装): -终端运行： - -`react-native link @react-native-oh-tpl/react-native-splash-screen` 或 `rnpm link @react-native-oh-tpl/react-native-splash-screen` - -### 第三步(配置): +```tsx 1. 新建启动页SplashScreenPage.ets，代码如下： - -```js import { SplashScreen } from '@react-native-oh-tpl/react-native-splash-screen/src/main/ets/SplashScreenView' - @Component export struct SplashScreenPage { build() { @@ -71,21 +56,16 @@ export struct SplashScreenPage { } } } -``` 2. main_pages.json 内添加 `SplashScreenPage`，代码如下： -```js { "src": [ "pages/SplashScreenPage" ] } -``` 3. 修改EntryAbility.ets，添加如下代码： -```js import { SplashScreen } from '@react-native-oh-tpl/react-native-splash-screen/src/main/ets/SplashScreen' - onWindowStageCreate(windowStage: window.WindowStage): void { let startWindowIcon = $r('app.media.splashIcon'); // 启动页图片 let startWindowBackground = "#FFFFFF"; // 启动页背景色 @@ -94,18 +74,10 @@ onWindowStageCreate(windowStage: window.WindowStage): void { super.onWindowStageCreate(windowStage); }) } -``` -## 使用说明 - -将 `react-native-splash-screen` 导入你的JS 文件； -在适当的时候关闭启动屏幕（如：启动初始化完成后）: - -```JavaScript +4. 在适当的时候关闭启动屏幕（如：启动初始化完成后）: import SplashScreen from '@react-native-oh-tpl/react-native-splash-screen/src/RNSplashScreenModule'; - export default class WelcomePage extends Component { - componentDidMount() { SplashScreen.hide(); // 关闭启动屏幕 } @@ -113,6 +85,86 @@ export default class WelcomePage extends Component { ``` +## Link + +目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 + +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` + +### 在工程根目录的 `oh-package.json` 添加 overrides 字段 + +```json +{ + ... + "overrides": { + "@rnoh/react-native-openharmony" : "./react_native_openharmony" + } +} +``` + +### 引入原生端代码 + +目前有两种方法： + +1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； +2. 直接链接源码。 + +方法一：通过 har 包引入（推荐） + +> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 + +打开 `entry/oh-package.json5`，添加以下依赖 + +```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" + } +``` + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +方法二：直接链接源码 + +> [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](/zh-cn/link-source-code.md) + +### 在 ArkTs 侧引入 SplashScreenPackage + +打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： + +```diff +... ++ import {SplashScreenPackage} from '@react-native-oh-tpl/react-native-splash-screen/ts'; + +export function createRNPackages(ctx: RNPackageContext): RNPackage[] { + return [ + new SamplePackage(ctx), ++ new SplashScreenPackage(ctx) + ]; +} +``` + +### 运行 + +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install +``` + +然后编译、运行即可。 + + ## 约束与限制 ### 兼容性 -- Gitee From f4280ef8725b3b0fc56eb7dd48a4e907f42663cf Mon Sep 17 00:00:00 2001 From: xiawenqiang Date: Wed, 26 Jun 2024 15:53:56 +0800 Subject: [PATCH 3/4] =?UTF-8?q?docs:=20[Issues:=20#I9TF6U]=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20react-native-splash-screen=20=E6=8C=87=E5=AF=BC?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-splash-screen.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/zh-cn/react-native-splash-screen.md b/zh-cn/react-native-splash-screen.md index 08f5ee4d..ad603e55 100644 --- a/zh-cn/react-native-splash-screen.md +++ b/zh-cn/react-native-splash-screen.md @@ -1,4 +1,5 @@ -> 模板版本：v0.2.1 + +> 模板版本：v0.2.2

react-native-splash-screen

@@ -215,4 +216,5 @@ hide() | 关闭启动屏幕 | Function | Yes | Yes | ## 开源协议 -本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-splash-screen/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-splash-screen/blob/master/LICENSE) ，请自由地享受和参与开源。 + \ No newline at end of file -- Gitee From 3ed94f4ef94100f8b0823e3e5222e852f390cf1a Mon Sep 17 00:00:00 2001 From: wuleilei <244295790@qq.com> Date: Wed, 3 Jul 2024 14:48:45 +0800 Subject: [PATCH 4/4] =?UTF-8?q?docs:=20[Issues:=20#I9TF6U]=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20react-native-splash-screen=20=E6=8C=87=E5=AF=BC?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-splash-screen.md | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/zh-cn/react-native-splash-screen.md b/zh-cn/react-native-splash-screen.md index ad603e55..d237ddc8 100644 --- a/zh-cn/react-native-splash-screen.md +++ b/zh-cn/react-native-splash-screen.md @@ -8,7 +8,7 @@ Supported platforms - + License

@@ -48,7 +48,7 @@ yarn add @react-native-oh-tpl/react-native-splash-screen@file:# ```tsx 1. 新建启动页SplashScreenPage.ets，代码如下： -import { SplashScreen } from '@react-native-oh-tpl/react-native-splash-screen/src/main/ets/SplashScreenView' +import { SplashScreen } from 'react-native-splash-screen' @Component export struct SplashScreenPage { build() { @@ -85,12 +85,15 @@ export default class WelcomePage extends Component { } ``` +## 使用 Codegen + +本库已经适配了 `Codegen` ，在使用前需要主动执行生成三方库桥接代码，详细请参考[ Codegen 使用文档](/zh-cn/codegen.md)。 ## Link 目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` +首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `HarmonyOS` ### 在工程根目录的 `oh-package.json` 添加 overrides 字段 @@ -172,24 +175,20 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[Releases](https://github.com/react-native-oh-library/react-native-splash-screen/releases) - -本文档内容基于以下版本验证通过： - -1. RNOH: 0.72.20; SDK：HarmonyOS NEXT Developer Preview2; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-safe-module Releases](https://github.com/react-native-oh-library/react-native-splash-screen/releases) -## 方法 +## API > [!tip] "Platform"列表示该属性在原三方库上支持的平台。 > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -Name | Description | Type | Required | HarmonyOS Support --- | -- | -- | -- | -- -show() | 打开启动屏幕(原生方法) | Function | Yes | Yes | -hide() | 关闭启动屏幕 | Function | Yes | Yes | +Name | Description | Type | Required | Platform | HarmonyOS Support +-- | -- | -- | -- | -- | -- +show() | 打开启动屏幕(原生方法) | void | Yes | iOS/Android | Yes +hide() | 关闭启动屏幕 | void | Yes | iOS/Android | Yes ## 属性 @@ -216,5 +215,5 @@ hide() | 关闭启动屏幕 | Function | Yes | Yes | ## 开源协议 -本项目基于 [MIT License](https://github.com/react-native-oh-library/react-native-splash-screen/blob/master/LICENSE) ，请自由地享受和参与开源。 +本项目基于 [MIT License](https://github.com/crazycodeboy/react-native-splash-screen/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file -- Gitee