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和插值函数来映射值，但它不起作用。使用下面的方法，它是动画，但我可以使值匹配我的屏幕大小。

<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％（以像素为单位）

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

1 个答案: