1

我正在尝试制作一个简单的动画来指示上传的进度。为此，我使用出色的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>

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

你有什么想法 ？

4

1 回答 1

0

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

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

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

于 2017-06-15T13:30:57.003 回答