我想使用进度条在 React Native 中上传数据

Question

我想在 React Native 中为我的上传使用进度条，但我不知道如何使用函数来创建进度条。我是 React Native 新手。

这是上传进度的代码

    console.log(progressEvent.loaded, progressEvent.total);
    console.log(
      'Upload progress: ' +
        Math.round((progressEvent.loaded / progressEvent.total) * 100) +
        '%',
    );
  };

这是我使用 axios 的上传功能

axios({
          method: 'POST',
          url: url,
          data: data,
          headers: headers,
          onUploadProgress: uploadProgress,
        })

这里我要显示我的进度条

<View style={styles.buttonStyle}>
            <Text style={styles.buttonTextStyle}>
              Progress={() => uploadProgress()}
            </Text>
          </View>

，请帮帮我。谢谢

Answer 1

我已经解决了，我需要使用State方法。

const [percentage, setPercentage] = useState(0);

const uploadProgress = (progressEvent) => {
    var Percentage = Math.round(
      (progressEvent.loaded / progressEvent.total) * 100,
    );
    setPercentage(Percentage);
    console.log(progressEvent.loaded, progressEvent.total);
    console.log(
      'Upload progress: ' +
        Math.round((progressEvent.loaded / progressEvent.total) * 100) +
        '%',
    );
  };

<Progress.Bar progress={percentage} width={200} />

我想使用进度条在 React Native 中上传数据

i want to use progress bar for uploading data in react native

progress-bar

react-native

axios