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

Question

我正在尝试制作一个简单的动画，指示上传的进度。 为此，我使用了很好的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和interpolate函数来映射值，但它不起作用。 使用下面的方法，它是动画，但我不能匹配我的屏幕大小的值。

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

我知道已经有构建的组件来显示进度但我希望在我上传照片的过程中使用我从回调获得的进度值进行动画制作。

你有什么想法 ？

Answer 1

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

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

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