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>，首先使用该类型，然后需要显示图像或视频的预览，然后才能将数据存储在数据库中。

在相同条件下使用相同方法，我们需要显示来自Instagram之类的数据库中的数据。仔细检查代码并告诉我解决方案。

Answer 1

你好@Sivasankar chimata，

您可以使用ES6的新endsWith方法如果检查查看即将来临的mimeType。在获得了哪种类型的数据之后，您只需将图像或视频的业务逻辑放入。

这是一个简单的代码示例：

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

编辑：

如果JSX Elements中的检查条件：

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

您可以执行类似的操作，甚至将其处理到另一个函数中并返回它。有了JSX，一切皆有可能：）

Answer 2

以下代码通过使用条件根据我的要求工作 {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}

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

2 个答案: