根据React Native中的内容类型/mime类型显示图像或视频

Question

我正在使用expo图像选择器上传图像和视频。然而，我在显示数据库中的图像和视频时遇到了问题。如何使用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>

当我们从库中选择文件时，我们将使用CCD_ 3，通过首先使用类型，我们需要显示图像或视频的预览，然后我们可以将数据存储在数据库中。

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

Answer 1

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

Answer 2

你好@Sivasankar chimata，

如果使用ES6的新endsWith方法检查即将到来的mimeType，则可以。在您获得所拥有的数据类型后，您可以简单地将您的业务逻辑用于图像或视频。

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

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

编辑：

如果检查JSX元素中的条件：

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

你可以做这样的事情，甚至可以将它处理到另一个函数中并返回它