rntpc_react-native-bars:基于 react-native-bars 的 OpenHarmony 适配版,导航栏与状态栏组件(高度获取、样式设置)

基于 react-native-bars 的 OpenHarmony 适配版,导航栏与状态栏组件(高度获取、样式设置)

分支3Tags3
文件最后提交记录最后更新时间
13 天前
13 天前
2 个月前
4 年前
2 个月前
2 个月前
2 个月前
13 天前
4 年前
2 个月前
2 个月前
2 个月前
13 天前
13 天前
2 个月前
13 天前
2 年前
2 个月前

模板版本:v0.4.0

react-native-bars

支持的平台 许可证

[Github 地址](https://github.com/react-native-oh-library/react-native-bars)

2.6.0 及以上版本基于 react-native-edge-to-edge 开发。~2.5.0 版本基于 react-native-bars 开发。

安装与使用

该第三方库的仓库已迁移至 Gitcode,且支持直接从 npm 下载,新的包名为:@react-native-ohos/react-native-bars,各版本对应关系如下:

三方库名称 三方库版本 发布信息 支持RN版本 Autolink 编译API版本 社区基线版本 npm地址
@react-native-ohos/react-native-bars ~2.6.0 Gitcode 发布版本 0.82 API12+ 1.8.1 npm 地址
@react-native-ohos/react-native-bars ~2.5.0 Gitcode 发布版本 0.77 API12+ 2.4.3 npm 地址
@react-native-ohos/react-native-bars ~2.4.4 Gitcode 发布版本 0.72 API12+ 2.4.3 npm 地址
@react-native-oh-tpl/react-native-bars <= 2.4.3-0.0.3@deprecated @react-native-oh-tpl/react-native-bars 发布版本(已弃用) 0.72 API12+ 2.4.3 npm 地址

对于未发布到 npm 的旧版本,请参考安装指南安装 tgz 包。

进入工程目录并输入以下命令:

npm

npm install @react-native-ohos/react-native-bars

yarn

yarn add @react-native-ohos/react-native-bars

下面的代码展示了这个库的基本使用场景:

使用时 import 的库名不变。

import * as React from 'react';
import { Switch, Text, View } from 'react-native';
import { StatusBar } from 'react-native-bars';

export function BarExample() {
  const [isEnabled, setIsEnabled] = React.useState(false);
  const toggleSwitch = () => setIsEnabled((previousState) => !previousState);

  return (
    <View>
      <StatusBar barStyle={isEnabled ? 'light-content' : 'dark-content'} />
      <Text style={{ color: 'white' }}>关 dark-content/ 开 light-content</Text>
      <Switch
        trackColor={{ false: '#767577', true: '#81b0ff' }}
        thumbColor={isEnabled ? '#f5dd4b' : '#f4f3f4'}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

使用 Codegen

本库已适配 Codegen。使用前,需主动执行生成第三方库桥接代码的操作,详细说明请参考 Codegen 使用文档

是否支持 autolink RN 框架版本
~2.6.0 0.82
~2.5.0 0.77
~2.4.4 0.72
<= 2.4.3-0.0.3@deprecated 0.72

使用 AutoLink 的工程需要根据该文档进行配置,Autolink 框架指导文档:https://gitcode.com/openharmony-sig/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

若您使用的版本支持 Autolink,并且工程已接入 Autolink,可跳过 ManualLink 配置。

ManualLink:本步骤为指导如何手动配置原生依赖

首先,请使用 DevEco Studio 打开项目中的 HarmonyOS 工程 harmony

1. 在工程根目录的 oh-package.json5 中添加 overrides 字段

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "file:./react_native_openharmony"
  }
}

2. 引入原生端代码

目前有两种方式:

  1. 通过 har 包引入(待 IDE 完善相关功能后,该方式将不再推荐;目前建议优先使用此方式);
  2. 直接引用源码。

方式一:通过 har 包引入(推荐)

har 包位于三方库安装路径下的 `harmony` 文件夹中。

打开 entry/oh-package.json5,添加以下依赖:

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",
    "@react-native-ohos/react-native-bars": "file:../../node_modules/@react-native-ohos/react-native-bars/harmony/bars.har"

  }

点击右上角的 sync 按钮

或在终端执行:

cd entry
ohpm install

方法二:直接链接源码

如需使用直接链接源码,请参考[直接链接源码说明](./link-source-code.md)

3.配置 CMakeLists 和引入 BarsPackage

若使用的是 <= 2.4.3-0.0.3 版本,请跳过本章。

打开 entry/src/main/cpp/CMakeLists.txt,添加:

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+ set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)

add_subdirectory("${RNOH_CPP_DIR}" ./rn)

# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-bars/src/main/cpp" ./native-bars)
# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
        ${GENERATED_CPP_FILES}
        ./PackageProvider.cpp"
        "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_bars)
# RNOH_END: manual_package_linking_2

打开 entry/src/main/cpp/PackageProvider.cpp,在其中添加:

#include "RNOH/PackageProvider.h"
+ #include "BarsPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx)
{
     return {
+    std::make_shared<BarsPackage>(ctx)
    };
}

4.在 ArkTs 端引入 RNBarsPackage

打开 entry/src/main/ets/RNPackagesFactory.ts,添加:

  ...
+ import {RNBarsPackage} from '@react-native-ohos/react-native-bars/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new RNBarsPackage(ctx)
  ];
}

运行

点击右上角的 sync 按钮。

或者在终端中执行:

cd entry
ohpm install

然后编译并运行即可。

约束与限制

兼容性

要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和手机 ROM。

以下版本已验证通过:

  1. RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
  2. RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio: 5.0.3.900; ROM: Next.0.0.71;
  3. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
  4. RNOH:0.82.18; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.120 SP7;

属性

“平台”列表示该属性在原三方库上支持的平台。

“HarmonyOS 支持”列为“是”表示 HarmonyOS 平台支持该属性;“否”则表示不支持;“部分支持”表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。

StatusBar

名称 说明 类型 必填 平台 HarmonyOS 支持
barStyle 状态栏内容样式 string 全部
animated 状态栏属性切换时是否使用动画 boolean 全部
名称 说明 类型 必填 平台 HarmonyOS 支持
barStyle 导航栏内容样式 string 全部

SystemBar

名称 说明 类型 必填 平台 HarmonyOS 支持
style2.6.0+ 状态栏样式 string 全部
animated 状态栏属性切换时是否使用动画 boolean 全部

静态方法

“平台”列表示该方法在原三方库上支持的平台。

“HarmonyOS 支持”列为“是”表示 HarmonyOS 平台支持该方法;“否”则表示不支持;“部分支持”表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。

StatusBar

名称 描述 类型 必填 平台 HarmonyOS 支持
pushStackEntry 将配置压入栈顶 object 全部
popStackEntry 从栈中移除指定配置 object 全部
replaceStackEntry 替换栈中指定配置 object 全部

SystemBars

名称 描述 类型 必填 平台 HarmonyOS 支持
setStyle2.6.0+ 以命令式方式设置状态栏样式,无需挂载组件 string 全部
setHidden2.6.0+ 以命令式方式设置状态栏显隐,无需挂载组件 boolean 全部
名称 描述 类型 必填 平台 HarmonyOS 支持
pushStackEntry 将配置压入栈顶 object 全部
popStackEntry 从栈中移除指定配置 object 全部
replaceStackEntry 替换栈中指定配置 object 全部

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT),欢迎自由使用并参与开源。

项目介绍

基于 react-native-bars 的 OpenHarmony 适配版,导航栏与状态栏组件(高度获取、样式设置)

定制我的领域