React Native iOS如何显示不确定状态进度条？

嘿，这个问题我之前帮好几个React Native开发者解决过！确实，ProgressViewIOS只支持展示确定的进度值，要实现iOS端那种不确定状态的进度条（不是加载圆环），咱们有几个非常可行的方案：

这个方案完全基于RN自带的API，不需要引入任何第三方库，能让你完全掌控动画效果和UI样式，完美适配iOS的设计风格。

具体实现思路是：用一个灰色容器作为进度条背景，内部放一个彩色的动画View，通过Animated.loop和Animated.timing实现来回滑动的效果，模拟原生不确定进度条的视觉体验。

代码示例：

import React, { useEffect, useRef } from 'react';
import { View, Animated, StyleSheet } from 'react-native';

const IndeterminateProgressBar = () => {
  // 初始化动画值
  const animationValue = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // 创建循环动画：先从左滑到右，再从右滑回左
    Animated.loop(
      Animated.sequence([
        Animated.timing(animationValue, {
          toValue: 1,
          duration: 1500, // 动画时长，可调整
          useNativeDriver: true, // 开启原生驱动提升性能
        }),
        Animated.timing(animationValue, {
          toValue: 0,
          duration: 1500,
          useNativeDriver: true,
        }),
      ])
    ).start();
  }, [animationValue]);

  // 将动画值映射为横向偏移量
  const translateX = animationValue.interpolate({
    inputRange: [0, 1],
    outputRange: [-100, 300], // 根据容器宽度调整这个范围，确保滑动流畅
  });

  return (
    <View style={styles.progressContainer}>
      <Animated.View
        style={[
          styles.progressBar,
          { transform: [{ translateX }] },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  progressContainer: {
    width: '100%',
    height: 4, // 进度条高度，可调整
    backgroundColor: '#e0e0e0', // 背景色
    borderRadius: 2,
    overflow: 'hidden',
  },
  progressBar: {
    width: 100, // 滑动条宽度，可调整
    height: '100%',
    backgroundColor: '#007aff', // iOS系统蓝色，可替换为你的主题色
    borderRadius: 2,
  },
});

export default IndeterminateProgressBar;

你可以根据需求调整动画时长、颜色、高度、滑动范围等参数，完全适配你的App设计。

如果不想自己写动画逻辑，直接用成熟的第三方库是最高效的选择。react-native-progress就是一个非常好用的库，它支持不确定状态的进度条，而且样式配置灵活，跨平台兼容。

步骤： #

1. 安装库：

npm install react-native-progress
# 或者用yarn
yarn add react-native-progress

2. 使用示例：

import React from 'react';
import { View } from 'react-native';
import { ProgressBar } from 'react-native-progress';

const YourComponent = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', paddingHorizontal: 20 }}>
      <ProgressBar
        indeterminate={true} // 开启不确定状态
        color="#007aff" // 进度条颜色
        height={4} // 高度
        borderWidth={0} // 去掉边框
        unfilledColor="#e0e0e0" // 未填充区域颜色
      />
    </View>
  );
};

export default YourComponent;

这个库还支持圆形进度条、饼图等其他样式，不确定状态的动画已经封装好了，开箱即用。

如果你需要和iOS系统原生的不确定进度条完全一致的效果，也可以通过封装原生组件实现。iOS的UIProgressView本身没有内置不确定状态，但可以通过Core Animation给progress属性添加循环动画，模拟不确定效果。

你需要创建一个RN原生模块，在iOS端实现动画逻辑，然后导出给RN端使用。这个方案适合有iOS原生开发经验的团队，能做到和系统UI完全对齐。

内容的提问来源于stack exchange，提问作者superkinhluan