# ty-react-native-blur **Repository Path**: rn-mi/ty-react-native-blur ## Basic Information - **Project Name**: ty-react-native-blur - **Description**: TY项目react-native-blur仓库 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-04-08 - **Last Updated**: 2025-08-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README > 模板版本：v0.2.2

@react-native-community/blur

Supported platforms License

This project is based on [@react-native-community/blur](https://github.com/react-native-oh-library/react-native-blur) > [!TIP] [Gitee 地址](https://gitee.com/rn-mi/ty-react-native-blur) ## 安装与使用 本库已经适配`C-API版本`从版本`4.4.0-0.1.0`开始的版本为`C-API版本`，`C-API版本`在性能和速度上都优于`ArkTS版本`。 进入到工程目录并输入以下命令： #### **npm** ```bash npm install @tuya-oh/blur ``` #### **yarn** ```bash yarn add @tuya-oh/blur ``` 下面的代码展示了这个库的基本使用场景： ```js import React, { useState } from 'react'; import { Image, StyleSheet, Platform, Switch, Text, View, SafeAreaView, Dimensions, } from 'react-native'; import { BlurView, BlurViewProps } from '@react-native-community/blur'; export const Blurs = () => { const [blurBlurType, setBlurBlurType] = useState < BlurViewProps['blurType'] > 'dark'; const [blurAmount, setBlurAmount] = useState < number > 100; useState < BlurViewProps['blurType'] > 'dark'; const tintColor = blurBlurType === 'dark' ? 'white' : 'black'; return ( Blur component ({Platform.OS}) { setBlurBlurType('light'); }} > light { setBlurBlurType('dark'); }} > dark { setBlurBlurType('chromeMaterialLight'); }} > chromeMaterialLight click will crash { setBlurAmount(20); }} > 20 { setBlurAmount(40); }} > 40 { setBlurAmount(60); }} > 60 { setBlurAmount(80); }} > 80 { setBlurAmount(100); }} > 100 ); }; export const BlurDemo = () => { const [showBlurs, setShowBlurs] = React.useState(false); //'../assets/bgimage.jpeg' 此路径的图片为本地图片，在使用demo时将此图片的路径换为自己本地图片路径 return ( {showBlurs ? : null} setShowBlurs(value)} value={showBlurs} /> ); }; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: 'transparent', }, blurContainer: { flex: 1, backgroundColor: 'transparent', justifyContent: 'center', alignItems: 'stretch', }, row: { marginTop: 50, flex: 1, width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'stretch', }, blurView: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, width: Dimensions.get('window').width, }, blurView2: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, }, img: { position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, height: Dimensions.get('window').height, width: Dimensions.get('window').width, }, text: { fontSize: 20, fontWeight: 'bold', textAlign: 'center', margin: 10, color: 'white', }, blurToggle: { position: 'absolute', top: 30, right: 10, alignItems: 'flex-end', }, }); ``` ## Link 目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。 首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 `harmony` ### 1.在工程根目录的 `oh-package.json5` 添加 overrides 字段 ```js { ... "overrides": { "@rnoh/react-native-openharmony" : "./react_native_openharmony" } } ``` ### 2.引入原生端代码 目前有两种方法： 1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； 2. 直接链接源码。 方法一：通过 har 包引入 > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "@rnoh/react-native-openharmony": "file:../react_native_openharmony", "@tuya-oh/blur": "file:../../node_modules/@tuya-oh/blur/harmony/blur.har" } ``` 点击右上角的 `sync` 按钮 或者在终端执行： ```bash cd entry ohpm install ``` 方法二：直接链接源码 > [!TIP] 如需使用直接链接源码，请参考[直接链接源码说明](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/link-source-code.md) ### 3.配置 CMakeLists 和引入 BlurPackage 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") + set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") add_subdirectory("${RNOH_CPP_DIR}" ./rn) # RNOH_BEGIN: add_package_subdirectories add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) + add_subdirectory("${OH_MODULES}/@tuya-oh/blur/src/main/cpp" ./blur) # RNOH_END: add_package_subdirectories add_library(rnoh_app SHARED "./PackageProvider.cpp" "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" ) target_link_libraries(rnoh_app PUBLIC rnoh) # RNOH_BEGIN: link_packages target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) + target_link_libraries(rnoh_app PUBLIC rnoh_blur) # RNOH_END: link_packages ``` 打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： ```diff #include "RNOH/PackageProvider.h" #include "SamplePackage.h" + #include "BlurPackage.h" using namespace rnoh; std::vector> PackageProvider::getPackages(Package::Context ctx) { return { std::make_shared(ctx), + std::make_shared(ctx) }; } ``` ### 4.在 ArkTs 侧引入 BlurView 组件（使用 4.4.0-0.1.0 及之后的版本忽略这步配置） 找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： ```diff + import { BlurView, BLUR_TYPE } from "@tuya-oh/blur" @Builder function buildCustomRNComponent(ctx: ComponentBuilderContext) { ... + if (ctx.componentName === BLUR_TYPE) { + BlurView({ + ctx: ctx.rnohContext, + tag: ctx.tag, + }) + } ... } ``` 在`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 ]; ``` ### 5.运行 点击右上角的 `sync` 按钮 或者在终端执行： ```bash cd entry ohpm install ``` 然后编译、运行即可。 ### 6.release包的使用 > 执行完'npm install @tuya-oh/blur@x.x.x'命令后，在生成的node_modules/npm install @tuya-oh/blur中即可获取release包。 打开 `entry/src/main/cpp/CMakeLists.txt`，添加： ```diff project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(CMAKE_SKIP_BUILD_RPATH TRUE) set(NATIVERENDER_ROOT_PATH "${CMAKE_CURRENT_SOURCE_DIR}") set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") set(RNOH_CPP_DIR "${OH_MODULE_DIR}/@rnoh/react-native-openharmony/include") set(REACT_COMMON_PATCH_DIR "${RNOH_CPP_DIR}/patches/react_native_core") set(CMAKE_CXX_STANDARD 17) set(LOG_VERBOSITY_LEVEL 1) set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments") set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated") set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie -DNDEBUG") set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use add_compile_definitions(WITH_HITRACE_SYSTRACE) # folly的编译选项 set(folly_compile_options -DFOLLY_NO_CONFIG=1 -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -DFOLLY_HAVE_RECVMMSG=1 -DFOLLY_HAVE_PTHREAD=1 -Wno-comma -Wno-shorten-64-to-32 -Wno-documentation -faligned-new ) add_compile_options("-Wno-unused-command-line-argument") # 添加头文件目录 include_directories(${NATIVERENDER_ROOT_PATH} ${RNOH_CPP_DIR} ${REACT_COMMON_PATCH_DIR} ${RNOH_CPP_DIR}/third-party/folly ${RNOH_CPP_DIR}/third-party/rn/ReactCommon ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/react/nativemodule/core ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/jsi ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/callinvoker ${RNOH_CPP_DIR}/third-party/boost/libs/utility/include ${RNOH_CPP_DIR}/third-party/boost/libs/stacktrace/include ${RNOH_CPP_DIR}/third-party/boost/libs/predef/include ${RNOH_CPP_DIR}/third-party/boost/libs/array/include ${RNOH_CPP_DIR}/third-party/boost/libs/throw_exception/include ${RNOH_CPP_DIR}/third-party/boost/libs/config/include ${RNOH_CPP_DIR}/third-party/boost/libs/core/include ${RNOH_CPP_DIR}/third-party/boost/libs/preprocessor/include ${RNOH_CPP_DIR}/third-party/double-conversion ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/react/renderer/graphics/platform/cxx ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/runtimeexecutor ${RNOH_CPP_DIR}/third-party/glog/src ${RNOH_CPP_DIR}/third-party/boost/libs/mpl/include ${RNOH_CPP_DIR}/third-party/boost/libs/type_traits/include ${RNOH_CPP_DIR}/third-party/rn/ReactCommon/yoga ${RNOH_CPP_DIR}/third-party/boost/libs/intrusive/include ${RNOH_CPP_DIR}/third-party/boost/libs/assert/include ${RNOH_CPP_DIR}/third-party/boost/libs/move/include ${RNOH_CPP_DIR}/third-party/boost/libs/static_assert/include ${RNOH_CPP_DIR}/third-party/boost/libs/container_hash/include ${RNOH_CPP_DIR}/third-party/boost/libs/describe/include ${RNOH_CPP_DIR}/third-party/boost/libs/mp11/include ${RNOH_CPP_DIR}/third-party/boost/libs/iterator/include ${RNOH_CPP_DIR}/third-party/boost/libs/detail/include ${RNOH_CPP_DIR}/patches/react_native_core/react/renderer/textlayoutmanager/platform/harmony + ${OH_MODULE_DIR}/@tuya-oh/blur/include ) configure_file( ${RNOH_CPP_DIR}/third-party/folly/CMake/folly-config.h.cmake ${RNOH_CPP_DIR}/third-party/folly/folly/folly-config.h ) file(GLOB GENERATED_CPP_FILES "./generated/*.cpp") # 添加rnoh动态共享包 add_library(rnoh SHARED "${RNOH_CPP_DIR}/RNOHOther.cpp" "${RNOH_CPP_DIR}/third-party/folly/folly/lang/SafeAssert.cpp" ) # 链接其他so target_link_directories(rnoh PUBLIC ${OH_MODULE_DIR}/@rnoh/react-native-openharmony/libs/arm64-v8a) + target_link_directories(rnoh PUBLIC ${OH_MODULE_DIR}/@tuya-oh/blur/libs/arm64-v8a) target_link_libraries(rnoh PUBLIC rnoh_semi libace_napi.z.so libace_ndk.z.so librawfile.z.so libhilog_ndk.z.so libnative_vsync.so libnative_drawing.so libc++_shared.so libhitrace_ndk.z.so react_render_scheduler rrc_image rrc_text rrc_textinput rrc_scrollview react_nativemodule_core react_render_animations jsinspector hermes jsi logger react_config react_debug react_render_attributedstring react_render_componentregistry react_render_core react_render_debug react_render_graphics react_render_imagemanager react_render_mapbuffer react_render_mounting react_render_templateprocessor react_render_textlayoutmanager react_render_telemetry react_render_uimanager react_utils rrc_root rrc_view react_render_leakchecker react_render_runtimescheduler runtimeexecutor + rnoh_blur ) if("$ENV{RNOH_C_API_ARCH}" STREQUAL "1") message("Experimental C-API architecture enabled") target_link_libraries(rnoh PUBLIC libqos.so) target_compile_definitions(rnoh PUBLIC C_API_ARCH) endif() # 添加rnoh_app共享包 add_library(rnoh_app SHARED ${GENERATED_CPP_FILES} "./PackageProvider.cpp" "${RNOH_CPP_DIR}/RNOHOther.cpp" "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" ) target_link_libraries(rnoh_app PUBLIC rnoh) # RNOH_END: link_packages target_compile_options(rnoh_app PUBLIC ${folly_compile_options} -DRAW_PROPS_ENABLED -std=c++17) ``` ### 7.字节码格式的release包使用 字节码格式的release包是指在release模式下编译出来、ets文件转换成了.abc、C++源码转换成.so的har包，其命名格式为 react_native_openharmony_abc-x.x.x.xxx.har。 字节码格式的release包使用方式跟release包使用大体上是一样的，主要有两点需要注意： 1. 使用字节码格式的release包需要将工程级的 build-profile.json5 文件中将 useNormalizedOHMUrl 设置为 true，如： ```diff "products": [ { "name": "default", "signingConfig": "default", "compatibleSdkVersion": "5.0.1(14)", "runtimeOS": "HarmonyOS", + "buildOption": { + "strictMode": { + "useNormalizedOHMUrl": true + } + } } ], ``` ## 约束与限制 ### 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@tuya-oh/blur Releases](https://gitee.com/rn-mi/ty-react-native-blur/releases) ## 属性 > [!TIP] "Platform"列表示该属性在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------------------------- | ----------------------------------------------------------------------------------------- | --------- | -------- | ----------- | ----------------- | | `blurType` | blur type | enum | yes | iOS,Android | yes | | `blurAmount?` | 0 - 100 (The maximum blurAmount on Android is 32, so higher values will be clamped to 32) | number | no | iOS,Android | 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] 如果要使用自适应模糊效果需要配置深色模式[配置文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-light-dark-color-adaptation-V5#section1421172621111)如果不配置深色模式则自适应模糊效果将没有深色模式，只有浅色模式。 | Name | Description | Platform | HarmonyOS Support | | ------------------------ | ------------------------------------------------------------------------------------------------------ | ----------- | ----------------- | | `xlight` | extra light blur type | iOS,Android | yes | | `light` | light blur type | iOS,Android | yes | | `dark` | dark blur type | iOS,Android | yes | | `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 13 only | yes | | `material` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS 13 only | yes | | `thickMaterial` | An adaptable blur effect that creates the appearance of a material that is thicker than normal | iOS 13 only | yes | | `thinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS 13 only | yes | | `ultraThinMaterial` | An adaptable blur effect that creates the appearance of an ultra-thin material | iOS 13 only | yes | | `chromeMaterialDark` | A blur effect that creates the appearance of an ultra-thin material and is always dark | iOS 13 only | yes | | `materialDark` | A blur effect that creates the appearance of a thin material and is always dark | iOS 13 only | yes | | `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 | iOS 13 only | yes | | `chromeMaterialLight` | An adaptable blur effect that creates the appearance of the system chrome | iOS 13 only | yes | | `materialLight` | An adaptable blur effect that creates the appearance of a material with normal thickness | iOS 13 only | yes | | `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 | yes | ## API > [!TIP] "Platform"列表示该组件在原三方库上支持的平台。 > [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该组件；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 | Name | Description | Type | Required | Platform | HarmonyOS Support | | -------------- | ------------------------------------------------------------------------------------------ | --------- | -------- | ----------- | ----------------- | | `BlurView` | Preload images to display later. e.g. | component | no | iOS,Android | yes | | `VibrancyView` | The vibrancy effect lets the content underneath a blurred view show through more vibrantly | component | no | iOS | no | ## 遗留问题 - [ ] @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) ## 其他 ## 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/Kureev/react-native-blur/blob/master/LICENSE) ，请自由地享受和参与开源。