根据React-Native中的Content-Type/ mime-type显示图像或视频

Question

我正在使用expo-image-picker上传图片和视频。然而，我在显示数据库中的图像和视频时遇到了一个问题。如何使用mime-type条件或media-type条件显示它们？如果有人知道这件事，请告诉我。

  getPermissionAsync = async () => {
    if (Constants.platform.android) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      status = await Permissions.getAsync(Permissions.CAMERA);
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      // allowsEditing: true,
      // aspect: [9, 16],
      quality: 1.0,
      allowsMultipleSelection: true,
    });
    console.log(result);
    if (!result.cancelled) {
      this.setState({ image: result.uri });
      this.setState({ type: result.type });
    }
  };





  _openCamera = async () => {
    // this._toggleModal(false);
    let permission = await this._cameraPermission()
    if (permission) {
      let result = await ImagePicker.launchCameraAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [9, 16],
        quality: 1.0,
        // base64: false,
      })
      console.log(result);
      // this._uploadPhoto(result)
      if (!result.cancelled) {
        this.setState({ image: result.uri });
        this.setState({ type: result.type });
      }
    } else {
      this.refs.popupComponent.showPopupMessage("Need Permission", "Close");
      console.log("Need Permission")
    }
  }

  _cameraPermission = async () => {
    status = await Permissions.getAsync(Permissions.CAMERA);
    // const { status } = await Permissions.getAsync(Permissions.CAMERA);
    let statusCamera = status.status;
    console.log("statusCameraRoll: ", statusCamera);
    if (statusCamera !== "granted") {
      console.log("Requesting Notification Permissions");
      status = await Permissions.askAsync(Permissions.CAMERA);
      statusCamera = status.status;
      if (statusCamera != '"granted"')
        return false
      else {
        let status_new = await Permissions.getAsync(Permissions.CAMERA_ROLL);
        let statusCameraRoll = status_new.status;
        if (statusCameraRoll !== "granted") {
          status_new = await Permissions.askAsync(Permissions.CAMERA_ROLL);
          statusCameraRoll = status_new.status
          if (statusCameraRoll !== "granted")
            return false
          else
            return true
        }
        else
          return true
      }
    }
    else {
      let status_new = await Permissions.getAsync(Permissions.CAMERA_ROLL);
      let statusCameraRoll = status_new.status;
      if (statusCameraRoll !== "granted") {
        status_new = await Permissions.askAsync(Permissions.CAMERA_ROLL);
        statusCameraRoll = status_new.status
        if (statusCameraRoll !== "granted")
          return false
        else
          return true
      }
      else
        return true
    }

  }

  _videoHandler = async () => {
    // this._toggleModal(false);
    let permission = await this._galleryPermission()
    setTimeout
    if (permission) {
      let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Videos,
        // allowsEditing: true,
        aspect: [9, 16],
        quality: 1.0,
        // allowsMultipleSelection: true,
        // base64: false,
      });
      console.log(result);
      // this._uploadPhoto(result)
      if (!result.cancelled) {
        this.setState({ video: result.uri });
        this.setState({ type: result.type });
      }
    } else {
      this.refs.popupComponent.showPopupMessage("Need Permission", "Close");
      console.log("Need Permission")
    }
  };

  _galleryPermission = async () => {
    status = await Permissions.getAsync(Permissions.CAMERA_ROLL);
    // const { status } = await Permissions.getAsync(Permissions.CAMERA_ROLL);
    let statusCameraRoll = status.status;
    console.log("statusCameraRoll: ", statusCameraRoll);
    if (statusCameraRoll !== "granted") {
      console.log("Requesting Notification Permissions");
      status = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      statusCameraRoll = status.status;
      if (statusCameraRoll != '"granted"')
        return false
      else
        return true
    }
    else
      return true
  }



<View style="{styles.mediaComponent}">
        <Image style={styles.imageView} source={{ uri: this.state.image }} />
        <View>
          <Video
            source={{ uri: this.state.video }}
            style={{ width: "100%", height: 300 }}
            resizeMode="cover"
            shouldPlay={this.state.shouldPlay}
            isMuted={this.state.mute}
          />
          <View style="{styles.controlBar}">
            <MaterialIcons
              name={this.state.mute ? "volume-mute" : "volume-up"}
              size={45}
              color="white"
              onPress={this.handleVolume}
            />{" "}
            <MaterialIcons
              name={this.state.shouldPlay ? "pause" : "play-arrow"}
              size={45}
              color="white"
              onPress={this.handlePlayAndPause}
            />
          </View>
         </View>
</View>

当我们从图库中选择文件时，我们将使用this.setState({ type: result.type });获得媒体类型，通过首先使用类型，我们需要显示图像或视频的预览，然后我们可以将数据存储在数据库中。

以同样的方式，通过使用相同的条件，我们需要显示来自数据库的数据，如Instagram。看一遍代码，告诉我解决方案。

Answer 1

Hello @Sivasankar chimata，

你可以使用es6的新的endsWith方法检查if-中即将到来的mimeType。得到数据类型后，您可以简单地将您的业务逻辑放入Image或Video。

下面是一个简单的代码示例：

​

checkIfImage = () => {
	const { mimeType } = this.state;
	if (mimeType.endsWith(".png") || mimeType.endsWith(".jpg")) return true;
	return false;
};

​

编辑：

JSX元素中的if-check条件：

​

<View>{ this.checkIfImage() ? <Image /> : <Video /> }</View>

​

您可以这样做，甚至将其处理到另一个函数中并返回它。有了JSX，一切皆有可能:)

Answer 2

下面的代码是通过使用conditions {this.state.type ===''? <View />:<View />}根据我的需求工作的

{this.state.type === 'image' ?
              <Image style={styles.imageView} source={{ uri: this.state.image }} />
              : null}

            {this.state.type === 'video' ?
              < View >
                <Video
                  source={{ uri: this.state.video }}
                  style={{ width: '100%', height: 300 }}
                  resizeMode="cover"
                  shouldPlay={this.state.shouldPlay}
                  isMuted={this.state.mute}
                />
                <View style={styles.controlBar}>
                  <MaterialIcons
                    name={this.state.mute ? "volume-mute" : "volume-up"}
                    size={45}
                    color="white"
                    onPress={this.handleVolume}
                  />
                  <MaterialIcons
                    name={this.state.shouldPlay ? "pause" : "play-arrow"}
                    size={45}
                    color="white"
                    onPress={this.handlePlayAndPause}
                  />
                </View>
              </View>
              : null}