diff --git a/zh-cn/react-native-community-blur.md b/zh-cn/react-native-community-blur.md index 234f3bd039e8a22d0fc2f471576cdbf798a432ea..7ce7cc097ec7d1e650c7dfbf2cf6bf68aef89514 100644 --- a/zh-cn/react-native-community-blur.md +++ b/zh-cn/react-native-community-blur.md @@ -1,5 +1,5 @@ -> 模板版本：v0.1.3 +> 模板版本：v0.2.2

@react-native-community/blur

@@ -8,16 +8,16 @@ Supported platforms - + License

-> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-blur) +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-blur) ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases)，并下载适用版本的 tgz 包。 +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases)，并下载适用版本的 tgz 包。 进入到工程目录并输入以下命令： @@ -41,7 +41,6 @@ yarn add @react-native-oh-tpl/blur@file:# 下面的代码展示了这个库的基本使用场景： -> [!WARNING] 使用时 import 的库名不变。 ```js import React, { useState} from 'react'; @@ -61,7 +60,7 @@ import { BlurViewProps, } from '@react-native-community/blur'; -const Blurs = () => { +export const Blurs = () => { const [blurBlurType, setBlurBlurType] = useState('dark'); const [blurAmount, setBlurAmount] = useState(100); useState('dark'); @@ -119,10 +118,12 @@ const Blurs = () => { }; export default const BlurDemo = () => { - const [showBlurs, setShowBlurs] = React.useState(true); + const [showBlurs, setShowBlurs] = React.useState(false); return ( + //'../assets/bgimage.jpeg' 此路径的图片为本地图片，在使用demo时将此图片的路径换为自己本地图片路径 > PackageProvider::getPackages(Package::Cont ### 在 ArkTs 侧引入 BlurView 组件 -打开 `entry/src/main/ets/pages/index.ets`，添加： +找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： + -````diff -... -+ import { BlurView, BLUR_TYPE } from "rnoh-blur" +```diff ++ import { BlurView, BLUR_TYPE } from "@react-native-oh-tpl/react-native-community-blur" @Builder -function CustomComponentBuilder(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnohContext, - tag: ctx.tag, - buildCustomComponent: CustomComponentBuilder - }) - } -+ else if (ctx.componentName === BLUR_TYPE) { +function buildCustomRNComponent(ctx: ComponentBuilderContext) { + ... ++ if (ctx.componentName === BLUR_TYPE) { + BlurView({ + ctx: ctx.rnohContext, + tag: ctx.tag, -+ buildCustomComponent: CustomComponentBuilder + }) + } ... } -... +``` + + +在`entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets` 找到常量 `arkTsComponentNames` 在其数组里添加组件名 + +>[!TIP] 本库使用了混合方案，需要添加组件名。 + + +```diff +const arkTsComponentNames: Array = [ + SampleView.NAME, + GeneratedSampleView.NAME, + PropsDisplayer.NAME, ++ BLUR_TYPE + ]; +``` ### 运行 @@ -334,7 +355,7 @@ ohpm install 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl Releases](https://github.com/react-native-oh-library/react-native-blur/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-community-blur Releases](https://github.com/react-native-oh-library/react-native-blur/releases) ## 属性 @@ -342,60 +363,57 @@ ohpm install > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ----------------------------------- | ----------------------------------------------------------------------------------------- | --------- | -------- | ------------ | ----------------- | -| `blurType` | blur type | enum | yes | All | yes | -| `blurAmount?` | 0 - 100 (The maximum blurAmount on Android is 32, so higher values will be clamped to 32) | number | No | All | yes | -| `reducedTransparencyFallbackColor?` | Reduce transparency fallback color | Any color | No | iOS only | no | -| `blurRadius?` | Matches iOS blurAmount | number | No | Android only | no | -| `downsampleFactor?` | Matches iOS blurAmount | number | No | Android only | no | -| `overlayColor?` | Default color based on iOS blurType | Any color | No | Android only | no | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| ----------------------------------- | ----------------------------------------------------------------------------------------- | --------- |----------| ------- | ----------------- | +| `blurType` | blur type | enum | yes | All | yes | +| `blurAmount?` | 0 - 100 (The maximum blurAmount on Android is 32, so higher values will be clamped to 32) | number | no | All | yes | +| `reducedTransparencyFallbackColor?` | Reduce transparency fallback color | Any color | no | iOS | no | +| `blurRadius?` | Matches iOS blurAmount | number | no | Android | no | +| `downsampleFactor?` | Matches iOS blurAmount | number | no | Android | no | +| `overlayColor?` | Default color based on iOS blurType | Any color | no | Android | no | #### blurType -> [!tip] "Platform"列表示该组件在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该组件；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - | Name | Description | Platform | HarmonyOS Support | -| ------------------------ | ------------------------------------------------------------------------------------------------------ | --------------------- | ----------------- | -| `xlight` | extra light blur type | All | no | +| ------------------------ | ------------------------------------------------------------------------------------------------------ |-----------------------| ----------------- | +| `xlight` | extra light blur type | All | yes | | `light` | light blur type | All | yes | | `dark` | dark blur type | All | yes | -| `extraDark` | extra dark blur type (tvOS only) | tvOS only | no | -| `regular` | regular blur type (iOS 10+ and tvOS only) | iOS 10+ and tvOS only | yes | -| `prominent` | prominent blur type (iOS 10+ and tvOS only) | iOS 10+ and tvOS only | no | -| `chromeMaterial` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS 13 only | no | -| `material` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS 13 only | no | -| `thickMaterial` | An adaptable blur effect that creates the appearance of a material that is thicker than normal | iOS 13 only | no | -| `thinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS 13 only | no | -| `ultraThinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS 13 only | no | -| `chromeMaterialDark` | A blur effect that creates the appearance of an ultra-thin material and is always dark | iOS 13 only | no | -| `materialDark` | A blur effect that creates the appearance of a thin material and is always dark | iOS 13 only | no | -| `thickMaterialDark` | A blur effect that creates the appearance of a material with normal thickness and is always dark | iOS 13 only | yes | -| `thinMaterialDark` | A blur effect that creates the appearance of a material that is thicker than normal and is always dark | iOS 13 only | yes | -| `ultraThinMaterialDark` | A blur effect that creates the appearance of the system chrome and is always dark | i iOS 13 only | no | -| `chromeMaterialLight` | An adaptable blur effect that creates the appearance of the system chrome | iOS 13 only | no | -| `materialLight` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS 13 only | no | -| `thickMaterialLight` | An adaptable blur effect that creates the appearance of a thin material | iOS 13 only | yes | -| `thinMaterialLight` | An adaptable blur effect that creates the appearance of a thin material | iOS 13 only | yes | -| `ultraThinMaterialLight` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS 13 only | no | - -## 组件 +| `extraDark` | extra dark blur type (tvOS only) | iOS | yes | +| `regular` | regular blur type (iOS 10+ and tvOS only) | iOS | yes | +| `prominent` | prominent blur type (iOS 10+ and tvOS only) | iOS | yes | +| `chromeMaterial` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS | yes | +| `material` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS | yes | +| `thickMaterial` | An adaptable blur effect that creates the appearance of a material that is thicker than normal | iOS | yes | +| `thinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS | yes | +| `ultraThinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS | yes | +| `chromeMaterialDark` | A blur effect that creates the appearance of an ultra-thin material and is always dark | iOS | yes | +| `materialDark` | A blur effect that creates the appearance of a thin material and is always dark | iOS | yes | +| `thickMaterialDark` | A blur effect that creates the appearance of a material with normal thickness and is always dark | iOS | yes | +| `thinMaterialDark` | A blur effect that creates the appearance of a material that is thicker than normal and is always dark | iOS | yes | +| `ultraThinMaterialDark` | A blur effect that creates the appearance of the system chrome and is always dark | iOS | yes | +| `chromeMaterialLight` | An adaptable blur effect that creates the appearance of the system chrome | iOS | yes | +| `materialLight` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS | yes | +| `thickMaterialLight` | An adaptable blur effect that creates the appearance of a thin material | iOS | yes | +| `thinMaterialLight` | An adaptable blur effect that creates the appearance of a thin material | iOS | yes | +| `ultraThinMaterialLight` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS | yes | + +## API > [!tip] "Platform"列表示该组件在原三方库上支持的平台。 > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该组件；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 | Name | Description | Type | Platform | HarmonyOS Support | -| -------------- | ------------------------------------------------------------------------------------------ | --------- | -------- | ----------------- | +| -------------- | ------------------------------------------------------------------------------------------ | --------- |----------| ----------------- | | `BlurView` | Preload images to display later. e.g. | component | All | yes | -| `VibrancyView` | The vibrancy effect lets the content underneath a blurred view show through more vibrantly | component | IOS | no | +| `VibrancyView` | The vibrancy effect lets the content underneath a blurred view show through more vibrantly | component | iOS | no | ## 遗留问题 -- [x] blurTypes 设置为 ios/android 平台定义枚举值，闪退[issue#755](https://gl.swmansion.com/rnoh/react-native-harmony/-/issues/755) -- [ ] harmony 暂不支持 VibrancyView 组件 +- [ ]@react-native-community/blur的 VibrancyView 组件 未实现HarmonyOS化 [issue#7](https://github.com/react-native-oh-library/react-native-blur/issues/7) +- [ ]@react-native-community/blur的reducedTransparencyFallbackColor属性未实现 HarmonyOS化[issue#8](https://github.com/react-native-oh-library/react-native-blur/issues/8) + ## 其他