React Native 鸿蒙跨平台开发：@react-native-community-progress-bar-android 进度条代码指南
·
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
📋 前言
@react-native-community/progress-bar-android 是一个强大的进度条组件库，它为 React Native 应用提供了完整的进度条展示能力，包括水平进度条、圆形进度条、小进度条、大进度条等多种样式。该库支持确定进度和不确定进度模式，能够满足各种场景下的进度展示需求，如文件下载、数据加载、任务处理等。该库支持 Android 和 HarmonyOS 两端，特别适合需要显示进度状态的场景，如应用启动加载、文件上传下载、数据处理进度等。
🎯 库简介
基本信息
-
库名称: @react-native-community/progress-bar-android
-
版本信息:
1.0.6: 支持 RN 0.72 版本（@react-native-ohos/progress-bar-android）1.1.0: 支持 RN 0.77 版本（@react-native-ohos/progress-bar-android）
-
官方仓库: https://github.com/react-native-progress-view/progress-bar-android
-
主要功能:
- 水平进度条：显示水平方向的标准进度条
- 圆形进度条：显示圆形旋转的加载进度条
- 确定进度：显示具体的进度值（0-100%）
- 不确定进度：显示旋转动画，表示正在处理中
- 多种尺寸：支持 Normal、Small、Large 等多种尺寸
- 自定义颜色：支持自定义进度条颜色
- 动画效果：内置平滑的动画效果
- 反向样式：支持反向显示的进度条样式
-
技术特点: 基于 Android 原生 ProgressBar 组件实现，提供跨平台统一的进度条 API
-
兼容性验证: 该第三方库支持直接从 npm 下载，新的包名为：
@react-native-ohos/progress-bar-android
为什么需要这个库？
- 视觉效果: 提供专业的进度条视觉效果，提升用户体验
- 场景丰富: 支持多种进度条样式，满足不同场景需求
- 跨平台: 支持 Android、HarmonyOS 两端，统一的 API
- 使用简单: API 设计简洁明了，易于集成和使用
- 性能优异: 基于原生组件实现，性能优异
- 可定制: 支持自定义颜色、尺寸等属性
- 鸿蒙支持: 完整支持 HarmonyOS 平台，实现真正的跨平台
📦 安装步骤
1. 使用 npm 安装
npm install @react-native-ohos/progress-bar-android@1.0.6-rc.1
2. 验证安装
安装完成后，检查 package.json 文件，应该能看到新增的依赖：
{
"dependencies": {
"@react-native-ohos/progress-bar-android": "^1.0.6-rc.1",
// ... 其他依赖
}
}
🔧 HarmonyOS 平台配置 ⭐
1. 配置 overrides（必需步骤）⭐⭐⭐
[!WARNING] 必须在 harmony 工程根目录的
oh-package.json5中添加 overrides 字段！
打开 harmony/oh-package.json5，添加：
{
...
"overrides": {
"@rnoh/react-native-openharmony": "0.72.90",
"@ohos/materialprogressbar": "2.0.3-rc.0"
}
}
2. 引入原生端代码
目前有两种方法：
方法一：通过 har 包引入（推荐）
[!TIP] har 包位于三方库安装路径的
harmony文件夹下。
打开 harmony/entry/oh-package.json5，添加以下依赖：
"dependencies": {
"@react-native-ohos/progress-bar-android": "file:../../node_modules/@react-native-ohos/progress-bar-android/harmony/progress_bar_android.har"
}
点击右上角的 sync 按钮
或者在终端执行：
cd harmony/entry
ohpm install
方法二：直接链接源码
步骤 1: 把 <RN工程>/node_modules/@react-native-ohos/progress-bar-android/harmony 目录下的源码 progress_bar_android 复制到 harmony 工程根目录下。
步骤 2: 在 harmony 工程根目录的 build-profile.json5 添加以下模块：
modules: [
...
{
name: 'progress_bar_android',
srcPath: './progress_bar_android',
}
]
步骤 3: 打开 progress_bar_android/oh-package.json5，修改 @rnoh/react-native-openharmony 和项目的版本一致。
步骤 4: 打开 harmony/entry/oh-package.json5，添加以下依赖：
"dependencies": {
"@rnoh/react-native-openharmony": "0.72.90",
"@react-native-ohos/progress-bar-android": "file:../progress_bar_android"
}
步骤 5: 点击 DevEco Studio 右上角的 sync 按钮
3. 配置 CMakeLists 和引入 ProgressBarAndroidPackage
打开 harmony/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,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/progress-bar-android/src/main/cpp" ./progress-bar-android)
# 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_progress_bar_android)
# RNOH_END: manual_package_linking_2
打开 harmony/entry/src/main/cpp/PackageProvider.cpp，添加：
#include "RNOH/PackageProvider.h"
#include "generated/RNOHGeneratedPackage.h"
#include "SamplePackage.h"
+ #include "ProgressBarAndroidPackage.h"
using namespace rnoh;
std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
return {
std::make_shared<RNOHGeneratedPackage>(ctx),
std::make_shared<SamplePackage>(ctx),
+ std::make_shared<ProgressBarAndroidPackage>(ctx)
};
}
4. 在 ArkTs 侧引入 ProgressBarAndroid 组件
找到 function buildCustomRNComponent()，一般位于 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets，添加：
...
+ import { ProgressBarAndroid, PROGRESS_BAR_TYPE } from "@react-native-ohos/progress-bar-android"
@Builder
export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
...
+ if (ctx.componentName === PROGRESS_BAR_TYPE){
+ ProgressBarAndroid({
+ ctx: ctx.rnComponentContext,
+ tag: ctx.tag
+ })
+ }
...
}
...
[!TIP] 本库使用了混合方案，需要添加组件名。
在 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets 找到常量 arkTsComponentNames 在其数组里添加组件名
const arkTsComponentNames: Array<string> = [
SampleView.NAME,
GeneratedSampleView.NAME,
PropsDisplayer.NAME,
+ PROGRESS_BAR_TYPE
];
5. 运行
点击右上角的 sync 按钮
或者在终端执行：
cd harmony/entry
ohpm install
然后编译、运行即可。
💻 完整代码示例
下面是一个完整的示例，展示了如何使用 ProgressBar 实现各种进度条效果：
import React, { useState, useEffect, useRef } from 'react';
import {
View,
StyleSheet,
Text,
TouchableOpacity,
SafeAreaView,
ScrollView,
StatusBar,
TextInput,
} from 'react-native';
import { ProgressBar } from '@react-native-community/progress-bar-android';
function ProgressBarDemo() {
const [horizontalProgress, setHorizontalProgress] = useState(0);
const [isHorizontalAnimating, setIsHorizontalAnimating] = useState(false);
const [isIndeterminateAnimating, setIsIndeterminateAnimating] = useState(true);
const [customProgress, setCustomProgress] = useState(50);
const [customColor, setCustomColor] = useState('#409EFF');
const intervalRef = useRef<NodeJS.Timeout | null>(null);
// 模拟水平进度条
const startHorizontalProgress = () => {
setIsHorizontalAnimating(true);
setHorizontalProgress(0);
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
intervalRef.current = setInterval(() => {
setHorizontalProgress(prev => {
if (prev >= 1) {
setIsHorizontalAnimating(false);
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
return 1;
}
return prev + 0.01;
});
}, 50);
};
// 重置水平进度条
const resetHorizontalProgress = () => {
setIsHorizontalAnimating(false);
setHorizontalProgress(0);
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
// 切换不确定进度条
const toggleIndeterminate = () => {
setIsIndeterminateAnimating(prev => !prev);
};
// 组件卸载时清理
useEffect(() => {
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, []);
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
{/* 顶部导航栏 */}
<View style={styles.header}>
<Text style={styles.headerTitle}>进度条演示</Text>
<Text style={styles.headerSubtitle}>@react-native-community/progress-bar-android</Text>
</View>
<ScrollView style={styles.content}>
{/* 水平进度条 */}
<View style={styles.card}>
<Text style={styles.cardTitle}>📊 水平进度条</Text>
<View style={styles.progressContainer}>
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={horizontalProgress}
animating={isHorizontalAnimating}
color="#409EFF"
/>
<Text style={styles.progressText}>
进度: {Math.round(horizontalProgress * 100)}%
</Text>
</View>
<View style={styles.buttonRow}>
<TouchableOpacity style={styles.button} onPress={startHorizontalProgress}>
<Text style={styles.buttonText}>开始进度</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.button, styles.stopButton]} onPress={resetHorizontalProgress}>
<Text style={styles.buttonText}>重置</Text>
</TouchableOpacity>
</View>
</View>
{/* 不确定进度条 */}
<View style={styles.card}>
<Text style={styles.cardTitle}>⭕ 不确定进度条</Text>
<View style={styles.progressContainer}>
<ProgressBar
styleAttr="Horizontal"
indeterminate={true}
animating={isIndeterminateAnimating}
color="#67C23A"
/>
<Text style={styles.progressText}>
状态: {isIndeterminateAnimating ? '加载中...' : '已停止'}
</Text>
</View>
<TouchableOpacity
style={[styles.button, isIndeterminateAnimating ? styles.stopButton : styles.startButton]}
onPress={toggleIndeterminate}
>
<Text style={styles.buttonText}>
{isIndeterminateAnimating ? '停止' : '开始'}
</Text>
</TouchableOpacity>
</View>
{/* 圆形进度条 - Normal */}
<View style={styles.card}>
<Text style={styles.cardTitle}>🔵 圆形进度条 - Normal</Text>
<View style={styles.circularContainer}>
<ProgressBar
styleAttr="Normal"
indeterminate={true}
animating={true}
/>
<Text style={styles.circularLabel}>Normal</Text>
</View>
</View>
{/* 圆形进度条 - Small */}
<View style={styles.card}>
<Text style={styles.cardTitle}>🟢 圆形进度条 - Small</Text>
<View style={styles.circularContainer}>
<ProgressBar
styleAttr="Small"
indeterminate={true}
animating={true}
/>
<Text style={styles.circularLabel}>Small</Text>
</View>
</View>
{/* 圆形进度条 - Large */}
<View style={styles.card}>
<Text style={styles.cardTitle}>🔴 圆形进度条 - Large</Text>
<View style={styles.circularContainer}>
<ProgressBar
styleAttr="Large"
indeterminate={true}
animating={true}
/>
<Text style={styles.circularLabel}>Large</Text>
</View>
</View>
{/* 反向进度条 */}
<View style={styles.card}>
<Text style={styles.cardTitle}>↩️ 反向进度条</Text>
<View style={styles.progressContainer}>
<ProgressBar
styleAttr="Inverse"
indeterminate={true}
animating={true}
color="#E6A23C"
/>
<Text style={styles.progressText}>Inverse</Text>
</View>
<View style={styles.progressContainer}>
<ProgressBar
styleAttr="SmallInverse"
indeterminate={true}
animating={true}
color="#F56C6C"
/>
<Text style={styles.progressText}>SmallInverse</Text>
</View>
<View style={styles.progressContainer}>
<ProgressBar
styleAttr="LargeInverse"
indeterminate={true}
animating={true}
color="#909399"
/>
<Text style={styles.progressText}>LargeInverse</Text>
</View>
</View>
{/* 自定义颜色进度条 */}
<View style={styles.card}>
<Text style={styles.cardTitle}>🎨 自定义颜色进度条</Text>
<View style={styles.colorInputContainer}>
<Text style={styles.colorLabel}>颜色值:</Text>
<TextInput
style={styles.colorInput}
value={customColor}
onChangeText={setCustomColor}
placeholder="#409EFF"
/>
</View>
<View style={styles.progressContainer}>
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={customProgress / 100}
animating={true}
color={customColor}
/>
<Text style={styles.progressText}>
进度: {customProgress}% | 颜色: {customColor}
</Text>
</View>
<View style={styles.sliderContainer}>
<TouchableOpacity
style={styles.sliderButton}
onPress={() => setCustomProgress(prev => Math.max(0, prev - 10))}
>
<Text style={styles.sliderButtonText}>-10%</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.sliderButton}
onPress={() => setCustomProgress(prev => Math.max(0, prev - 1))}
>
<Text style={styles.sliderButtonText}>-1%</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.sliderButton}
onPress={() => setCustomProgress(prev => Math.min(100, prev + 1))}
>
<Text style={styles.sliderButtonText}>+1%</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.sliderButton}
onPress={() => setCustomProgress(prev => Math.min(100, prev + 10))}
>
<Text style={styles.sliderButtonText}>+10%</Text>
</TouchableOpacity>
</View>
</View>
{/* 多色进度条展示 */}
<View style={styles.card}>
<Text style={styles.cardTitle}>🌈 多色进度条展示</Text>
<View style={styles.progressContainer}>
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.3}
animating={true}
color="#409EFF"
/>
<Text style={styles.progressText}>蓝色进度条 (30%)</Text>
</View>
<View style={styles.progressContainer}>
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.6}
animating={true}
color="#67C23A"
/>
<Text style={styles.progressText}>绿色进度条 (60%)</Text>
</View>
<View style={styles.progressContainer}>
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.9}
animating={true}
color="#E6A23C"
/>
<Text style={styles.progressText}>橙色进度条 (90%)</Text>
</View>
<View style={styles.progressContainer}>
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={1.0}
animating={true}
color="#F56C6C"
/>
<Text style={styles.progressText}>红色进度条 (100%)</Text>
</View>
</View>
{/* 使用说明 */}
<View style={styles.card}>
<Text style={styles.cardTitle}>💡 使用说明</Text>
<Text style={styles.infoText}>• 水平进度条：使用 styleAttr="Horizontal" 显示水平进度条</Text>
<Text style={styles.infoText}>• 不确定进度：设置 indeterminate={true} 显示旋转动画</Text>
<Text style={styles.infoText}>• 确定进度：设置 progress 属性（0-1）显示具体进度</Text>
<Text style={styles.infoText}>• 圆形进度条：使用 Normal、Small、Large 等样式</Text>
<Text style={styles.infoText}>• 反向进度条：使用 Inverse、SmallInverse、LargeInverse 等样式</Text>
<Text style={styles.infoText}>• 自定义颜色：通过 color 属性设置进度条颜色</Text>
<Text style={styles.infoText}>• 动画控制：通过 animating 属性控制动画显示/隐藏</Text>
<Text style={styles.infoText}>• 鸿蒙适配：所有样式在鸿蒙端完美兼容</Text>
</View>
{/* 技术说明 */}
<View style={styles.card}>
<Text style={styles.cardTitle}>🔧 技术说明</Text>
<Text style={styles.infoText}>• styleAttr 属性：决定进度条的样式类型</Text>
<Text style={styles.infoText}>• progress 属性：0 到 1 之间的数值，表示进度百分比</Text>
<Text style={styles.infoText}>• indeterminate 属性：true 表示不确定进度（旋转动画）</Text>
<Text style={styles.infoText}>• animating 属性：控制进度条的显示和隐藏</Text>
<Text style={styles.infoText}>• color 属性：支持十六进制颜色值（如 #409EFF）</Text>
<Text style={styles.infoText}>• 性能优化：基于原生组件实现，性能优异</Text>
</View>
</ScrollView>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F7FA',
},
header: {
padding: 20,
backgroundColor: '#FFFFFF',
borderBottomWidth: 1,
borderBottomColor: '#EBEEF5',
},
headerTitle: {
fontSize: 24,
fontWeight: '700',
color: '#303133',
textAlign: 'center',
marginBottom: 8,
},
headerSubtitle: {
fontSize: 16,
fontWeight: '500',
color: '#909399',
textAlign: 'center',
},
content: {
flex: 1,
padding: 16,
},
card: {
backgroundColor: '#FFFFFF',
borderRadius: 12,
marginBottom: 16,
padding: 16,
shadowColor: '#000000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.08,
shadowRadius: 8,
elevation: 4,
},
cardTitle: {
fontSize: 18,
fontWeight: '600',
color: '#303133',
marginBottom: 12,
},
progressContainer: {
backgroundColor: '#F5F7FA',
borderRadius: 8,
padding: 16,
marginBottom: 12,
},
progressText: {
fontSize: 14,
color: '#606266',
marginTop: 8,
textAlign: 'center',
},
buttonRow: {
flexDirection: 'row',
gap: 12,
},
button: {
flex: 1,
backgroundColor: '#409EFF',
borderRadius: 8,
padding: 12,
alignItems: 'center',
},
startButton: {
backgroundColor: '#67C23A',
},
stopButton: {
backgroundColor: '#F56C6C',
},
buttonText: {
color: '#FFFFFF',
fontSize: 14,
fontWeight: '600',
},
circularContainer: {
backgroundColor: '#F5F7FA',
borderRadius: 8,
padding: 24,
alignItems: 'center',
},
circularLabel: {
fontSize: 14,
color: '#606266',
marginTop: 12,
},
colorInputContainer: {
flexDirection: 'row',
alignItems: 'center',
marginBottom: 12,
},
colorLabel: {
fontSize: 14,
color: '#909399',
marginRight: 8,
},
colorInput: {
flex: 1,
borderWidth: 1,
borderColor: '#DCDFE6',
borderRadius: 8,
paddingHorizontal: 12,
paddingVertical: 8,
fontSize: 14,
color: '#303133',
},
sliderContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
gap: 8,
},
sliderButton: {
flex: 1,
backgroundColor: '#E4E7ED',
borderRadius: 8,
padding: 10,
alignItems: 'center',
},
sliderButtonText: {
fontSize: 12,
fontWeight: '600',
color: '#606266',
},
infoText: {
fontSize: 14,
color: '#606266',
lineHeight: 22,
marginBottom: 6,
},
});
export default ProgressBarDemo;
🎨 实际应用场景
完整示例代码已展示了以下实际应用场景：
- 水平进度条: 显示水平方向的标准进度条，支持确定和不确定进度
- 不确定进度条: 显示旋转动画，表示正在处理中
- 圆形进度条: 支持多种尺寸（Normal、Small、Large）
- 反向进度条: 支持反向显示的进度条样式
- 自定义颜色: 支持自定义进度条颜色
- 多色展示: 展示不同颜色的进度条效果
- 进度控制: 支持动态调整进度值
⚠️ 注意事项与最佳实践
1. 水平进度条使用（推荐）
水平进度条是最常用的场景：
import { ProgressBar } from '@react-native-community/progress-bar-android';
// 确定进度
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.6}
animating={true}
color="#409EFF"
/>
// 不确定进度
<ProgressBar
styleAttr="Horizontal"
indeterminate={true}
animating={true}
color="#409EFF"
/>
2. 圆形进度条样式选择
根据场景选择合适的尺寸：
// 正常大小（默认）
<ProgressBar
styleAttr="Normal"
indeterminate={true}
animating={true}
/>
// 小尺寸
<ProgressBar
styleAttr="Small"
indeterminate={true}
animating={true}
/>
// 大尺寸
<ProgressBar
styleAttr="Large"
indeterminate={true}
animating={true}
/>
3. progress 属性使用
progress 属性的值必须在 0 到 1 之间：
// 正确：0 到 1 之间的值
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.6} // 60%
animating={true}
/>
// 错误：超出范围
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={1.5} // 错误！
animating={true}
/>
4. indeterminate 属性使用
合理使用 indeterminate 属性：
// 确定进度：知道具体进度值
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.7}
animating={true}
/>
// 不确定进度：不知道具体进度值
<ProgressBar
styleAttr="Horizontal"
indeterminate={true}
animating={true}
/>
// 注意：styleAttr 为 Horizontal 时，indeterminate 必须为 false 才能使用 progress
5. animating 属性使用
使用 animating 属性控制进度条显示/隐藏：
// 显示进度条
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.5}
animating={true} // 显示
/>
// 隐藏进度条
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.5}
animating={false} // 隐藏
/>
6. 颜色自定义
使用 color 属性自定义进度条颜色：
// 使用十六进制颜色
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.5}
color="#409EFF"
/>
// 常用颜色
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.5}
color="#67C23A" // 绿色
/>
7. 进度模拟
使用定时器模拟进度更新：
const [progress, setProgress] = useState(0);
const [isAnimating, setIsAnimating] = useState(false);
const startProgress = () => {
setIsAnimating(true);
setProgress(0);
const interval = setInterval(() => {
setProgress(prev => {
if (prev >= 1) {
setIsAnimating(false);
clearInterval(interval);
return 1;
}
return prev + 0.01;
});
}, 50);
return () => clearInterval(interval);
};
8. 版本兼容性
根据 RN 版本选择对应的库版本：
| RN 版本 | @react-native-ohos/progress-bar-android |
|---|---|
| 0.72 | 1.0.6 |
| 0.77 | 1.1.0 |
📊 对比：传统方案 vs ProgressBar
| 特性 | 传统方案 | ProgressBar |
|---|---|---|
| 水平进度条 | ⚠️ 需要自定义实现 | ✅ 内置支持 |
| 圆形进度条 | ⚠️ 需要自定义实现 | ✅ 内置支持 |
| 多种尺寸 | ❌ 不支持 | ✅ 支持 |
| 自定义颜色 | ⚠️ 限制较多 | ✅ 灵活 |
| 不确定进度 | ⚠️ 需要自定义动画 | ✅ 内置支持 |
| 性能 | ⚠️ 一般 | ✅ 优异（原生组件） |
| 跨平台 | ⚠️ 需要分别实现 | ✅ 统一接口 |
| 开发效率 | ⚠️ 需要编写原生代码 | ✅ 开箱即用 |
| API 简洁性 | ❌ 复杂 | ✅ 简洁 |
| 反向样式 | ❌ 不支持 | ✅ 支持 |
| 鸿蒙支持 | ❌ 不支持 | ✅ 完整支持 |
📝 总结
通过集成 @react-native-community/progress-bar-android，我们为项目添加了强大的进度条展示能力。这个库基于 Android 原生 ProgressBar 组件实现，提供了跨平台统一的进度条 API，可以轻松实现水平进度条、圆形进度条、不确定进度等各种进度展示效果，帮助开发者打造专业的用户体验。
关键要点回顾
- ✅ 安装依赖:
npm install @react-native-ohos/progress-bar-android - ✅ 配置 overrides: 在 oh-package.json5 中添加 overrides 字段（包含 @ohos/materialprogressbar）
- ✅ 配置平台: 通过 har 包或直接链接源码，配置 CMakeLists.txt 和 PackageProvider.cpp
- ✅ 配置混合方案: 在 ArkTs 侧引入 ProgressBarAndroid 组件并添加组件名
- ✅ 集成代码: 使用 ProgressBar 组件提供的各种 API
- ✅ 支持功能: 水平进度条、圆形进度条、不确定进度、自定义颜色等
- ✅ 测试验证: 确保三端表现一致
常用 API 快速参考
import { ProgressBar } from '@react-native-community/progress-bar-android';
// 水平进度条 - 确定进度
<ProgressBar
styleAttr="Horizontal"
indeterminate={false}
progress={0.6}
animating={true}
color="#409EFF"
/>
// 水平进度条 - 不确定进度
<ProgressBar
styleAttr="Horizontal"
indeterminate={true}
animating={true}
color="#409EFF"
/>
// 圆形进度条
<ProgressBar
styleAttr="Normal" // 或 "Small", "Large"
indeterminate={true}
animating={true}
/>
// 反向进度条
<ProgressBar
styleAttr="Inverse" // 或 "SmallInverse", "LargeInverse"
indeterminate={true}
animating={true}
/>
// 属性说明
- styleAttr: 进度条样式（Horizontal, Normal, Small, Large, Inverse, SmallInverse, LargeInverse）
- indeterminate: 是否为不确定进度（true: 旋转动画, false: 显示具体进度）
- progress: 进度值（0 到 1 之间，仅在 indeterminate=false 时有效）
- animating: 是否显示进度条（true: 显示, false: 隐藏）
- color: 进度条颜色（十六进制颜色值）
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
8
0- 0
已为社区贡献23条内容
所有评论(0)