react-native - Expo ImagePicker在取消时卡在ActivityIndi​​cator上

Question

我正在创建一个项目，我需要用户从他们的照片库中选择一个图像。但是我遇到了一个问题，当用户在他们的画廊中取消 ImagePicker 时，活动指示器将显示并且用户不再能够选择图像。我该怎么做才能在按下取消按钮时重新显示上传图片按钮？

这是我的代码：

              {!this.state.loading ? (
                <Button
                  full
                  style={{
                    fontFamily: "nunito",
                    backgroundColor: "#f3d95c"
                    // alignSelf: "center",
                  }}
                  onPress={() => this.imagePicker()}
                >
                  <Text
                    style={{
                      fontFamily: "nunito"
                      // color: "white"
                    }}
                  >
                    {this.state.imageUrl === ""
                      ? "Upload Photo"
                      : "Photo Selected"}
                  </Text>
                </Button>
              ) : (
                <ActivityIndicator size="large" color="#0000ff" />
              )}

编辑：这是功能

imagePicker = () => {
    this.setState({ loading: true });
    Permissions.askAsync(Permissions.CAMERA_ROLL);
    ImagePicker.launchImageLibraryAsync({
      allowsEditing: false,
      base64: true
    }).then(async result => {
      const blob = await new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function() {
          resolve(xhr.response);
        };
        xhr.onerror = function(e) {
          reject(new TypeError("Network request failed"));
        };
        xhr.responseType = "blob";
        xhr.open("GET", result.uri, true);
        xhr.send(null);
      });

      const ref = firebase
        .storage()
        .ref()
        .child(uuid.v4());
      const snapshot = await ref.put(blob);
      blob.close();
      let imageUrl = await snapshot.ref.getDownloadURL();

      this.setState({ imageUrl: imageUrl, loading: false });
    });
  };