# ty-react-native-webview **Repository Path**: rn_oh_lib/ty-react-native-webview ## Basic Information - **Project Name**: ty-react-native-webview - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: ty_release - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-09-05 - **Last Updated**: 2025-09-09 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

react-native-webview

Supported platforms License

## 安装与使用 进入到工程目录并输入以下命令： #### **npm** ```bash npm install @tuya-oh/react-native-webview ``` #### **yarn** ```bash yarn add @tuya-oh/react-native-webview ``` 下面的代码展示了这个库的基本使用场景： ```js import { WebView } from "react-native-webview"; ; ``` ## Link 目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` ### 引入原生端代码 目前有两种方法： 1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； 2. 直接链接源码。 方法一：通过 har 包引入 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", "rnoh-webview": "file:../../node_modules/react-native-webview/harmony/rn_webview.har" } ``` 点击右上角的 `sync` 按钮 或者在终端执行： ```bash cd entry ohpm install ``` 方法二：直接链接源码 打开 `entry/oh-package.json5`，添加以下依赖 ```json "dependencies": { "rnoh": "file:../rnoh", "rnoh-webview": "file:../../node_modules/react-native-webview/harmony/rn_webview" } ``` 打开终端，执行： ```bash cd entry ohpm install --no-link ``` ### 配置 CMakeLists 和引入 WebViewPackage 打开 `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_MODULE_DIR "${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_MODULE_DIR}/rnoh-webview/src/main/cpp" ./webview) # 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_webview) # RNOH_END: link_packages ``` 打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： ```diff #include "RNOH/PackageProvider.h" #include "SamplePackage.h" + #include "WebViewPackage.h" using namespace rnoh; std::vector> PackageProvider::getPackages(Package::Context ctx) { return { std::make_shared(ctx), + std::make_shared(ctx) }; } ``` ### 在 ArkTs 侧引入 webview 组件 打开 `entry/src/main/ets/pages/index.ets`，添加： ```diff import { RNApp, ComponentBuilderContext, RNAbility, AnyJSBundleProvider, MetroJSBundleProvider, ResourceJSBundleProvider, } from 'rnoh' import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package" import { createRNPackages } from '../RNPackagesFactory' + import { WebView, WEB_VIEW } from "rnoh-webview" @Builder function CustomComponentBuilder(ctx: ComponentBuilderContext) { if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) { SampleView({ ctx: ctx.rnohContext, tag: ctx.descriptor.tag, buildCustomComponent: CustomComponentBuilder }) } + else if (ctx.descriptor.type === WEB_VIEW) { + WebView({ + ctx: ctx.rnohContext, + tag: ctx.descriptor.tag, + buildCustomComponent: CustomComponentBuilder + }) + } ... } ... ``` ### 在 ArkTs 侧引入 WebViewPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff import type {RNPackageContext, RNPackage} from 'rnoh/ts'; import {SamplePackage} from 'rnoh-sample-package/ts'; + import { WebViewPackage } from 'rnoh-webview/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), + new WebViewPackage(ctx) ]; } ``` ### 运行 点击右上角的 `sync` 按钮 或者在终端执行： ```bash cd entry ohpm install ``` 然后编译、运行即可。 ### release包的使用 > 执行完'npm install @tuya-oh/react-native-webview@x.x.x'命令后，在生成的node_modules/npm install @tuya-oh/react-native-webview中即可获取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/react-native-webview/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/react-native-webview/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_webView ) 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) ``` ### 字节码格式的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。 ## 属性 详情请查看[webview 官方文档](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md) 如下是 webview 已经鸿蒙化的属性： | 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- | ----------------- | -------- | | `source` | Loads static HTML or a URI (with optional headers) in the WebView | One of:
**Load uri :**
uri
headers
**Static HTML :**
html
baseUrl | yes | All | yes | | `injectedJavaScript?` | Set this to provide JavaScript that will be injected into the web page after the document finishes loading | string | No | All | yes | | `originWhitelist?` | List of origin strings to allow being navigated to. | string[] | No | iOS,android,macOS | yes | | `scalesPageToFit?` | Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. | boolean | No | android | yes | | `startInLoadingState?` | Boolean value that forces the WebView to show the loading view on the first load. | boolean | No | iOS,android,macOS | yes | | `style?` | A style object that allow you to customize the WebView style. | Style | No | ALL | yes | | `domStorageEnabled?` | Boolean value to control whether DOM Storage is enabled. Used only in Android. | boolean | No | android | yes | | `javaScriptEnabled?` | Boolean value to enable JavaScript in the WebView. | boolean | No | All | yes | | `showsHorizontalScrollIndicator?` | Boolean value that determines whether a horizontal scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | | `showsVerticalScrollIndicator` | Boolean value that determines whether a vertical scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | | `cacheEnabled?` | Sets whether WebView should use browser caching. | boolean | No | iOS,android,macOS | yes | | `cacheMode?` | Overrides the way the cache is used. | string | No | android | yes | | `textZoom?` | If the user has set a custom font size in the Android system, an undesirable scale of the site interface in WebView occurs. | number | No | android | yes | | ` injectJavaScript?: (script: string) => void` | Executes the JavaScript string. | function | No | iOS,android,macOS | yes | | ` onLoadEnd?: (event) => void` | Function that is invoked when the WebView load succeeds or fails used. | function | No | All | yes | | ` onMessage?: (event) => void` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | function | No | iOS,android,macOS | yes | | ` onShouldStartLoadWithRequest?: (event) => void` | Function that allows custom handling of any web view requests. | function | No | iOS,android,macOS | yes | ## 遗留问题 ## 其他 ## 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/react-native-webview/react-native-webview/blob/master/LICENSE) ，请自由地享受和参与开源。