React-Native：上传照片时的进度条动画答案

【问题标题】：React-Native: Progress Bar animation when uploading a photoReact-Native：上传照片时的进度条动画
【发布时间】：2023-03-10 21:30:01
【问题描述】：

我正在尝试制作一个简单的动画来指示上传进度。为此，我使用出色的 react-native-fetch-blob 库来上传和跟踪上传进度。正如您在下面看到的那样，我正在更新状态，但我很难为我的视图宽度设置动画。

.uploadProgress({ interval : 50 },(written, total) => {
  this.setState({progressBarValue:  parseInt((written / total) * 100)});
  console.log("State Progress Value", this.state.progressBarValue);
})

我尝试使用Animated.View 和插值函数来映射值，但它不起作用。使用下面的方法可以制作动画，但我的值无法匹配我的屏幕尺寸。

<View style={{position: 'absolute', top:0, right:0, left:0, height: 2}}>
      <Animated.View style={[
        { backgroundColor: 'red', height: 2},
        {
          width: this.state.progressBarValue
        }
      ]} />
</View>

我知道已经构建了组件来显示进度，但我想在上传照片时使用从回调中获得的进度值制作动画。

你有什么想法吗？

【问题讨论】：

标签： javascript animation react-native progress-bar react-native-fetch-blob

【解决方案1】：

我猜你会想先使用设备的宽度

const { Dimensions } = React; 
Dimensions.get('window').width

然后以像素为单位计算屏幕宽度的 1%

【讨论】：

嗨！我已经获得了屏幕的宽度，并想使用来自Animated 的便捷插值函数，但是我必须使用 Animated.timing 这不是我想要的，因为我需要使用我的 progressBarValue