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 и интерполировать функцию для сопоставления значений, но это не сработало. С помощью метода ниже это анимация, но я не могу значения, соответствующие моему размеру экрана.

<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% ширины вашего экрана в пикселях