我有一个视频录音应用程序，其中有两种情况：
但是，当我从图库中选择一个视频并返回主屏幕时，该视频没有出现在主屏幕上，而是相机屏幕仍然存在。我曾进行过检查，以检查我的视频状态是否仍然为空，但它正在从图库中接收视频。我猜想有一些样式重叠的问题无法解决。
以下是我编写的确切代码：
import React, {PureComponent} from 'react';
import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {RNCamera} from 'react-native-camera';
import Icon from 'react-native-vector-icons/Entypo';
import ImagePicker from 'react-native-image-crop-picker';
import Video from 'react-native-video';
export default class Shoot extends PureComponent {
constructor(props) {
super(props);
this.state = {
recording: false,
processing: true,
upload: false,
galleryVideo: '',
video: '',
};
}
render() {
return (
<View style={styles.container}>
{this.state.upload === true ? (
<TouchableOpacity
style={{
backgroundColor: '#e75480',
marginTop: '1%',
marginLeft: '81%',
marginBottom:'1%',
width: 80,
height: 30,
padding: 5,
borderRadius: 5,
justifyContent: 'center',
alignContent: 'center',
}}
onPress={() => this.props.navigation.navigate('Post',{key:1})}>
<Text style={{color: 'white',textAlign:'center'}}>Next</Text>
</TouchableOpacity>
) : null}
<RNCamera
ref={(ref) => {
this.camera = ref;
}}
style={styles.preview}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
androidRecordAudioPermissionOptions={{
title: 'Permission to use audio recording',
message: 'We need your permission to use your audio',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
captureAudio={true}
/>
<View style={{flex: 0, flexDirection: 'row', justifyContent: 'center'}}>
<TouchableOpacity
onPress={this.take15sVideo.bind(this)}
style={{
width: 60,
height: 60,
justifyContent: 'center',
alignContent: 'center',
position: 'absolute',
bottom: 0,
left: '5%',
}}>
<Text style={{textAlign: 'center', color: 'red', fontSize: 15}}>
15s
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.take60sVideo.bind(this)}
style={{
width: 60,
height: 60,
justifyContent: 'center',
alignContent: 'center',
position: 'absolute',
bottom: 0,
left: '25%',
}}>
<Text style={{textAlign: 'center', color: 'red', fontSize: 15}}>
60s
</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.take30sVideo.bind(this)}
style={styles.capture}></TouchableOpacity>
{this.state.upload === false ? (
<TouchableOpacity
style={{
position: 'absolute',
bottom: 0,
right: '15%',
justifyContent: 'center',
alignItems: 'center',
}}
onPress={this.video.bind(this)}>
<Icon name="image" size={30} color="white" />
<Text style={{color: 'white', fontWeight: 'bold'}}>Upload</Text>
</TouchableOpacity>
) : null}
{this.state.galleryVideo === 1 && this.state.video != '' ? (
<Video
source={{uri: this.state.video}}
style={{
position: 'absolute',
top: 0,
left: 0,
alignItems: 'stretch',
bottom: 0,
right: 0,
height: '90%',
}}
resizeMode="cover"
repeat={true}
/>
) : null}
</View>
</View>
);
}
video = () => {
ImagePicker.openPicker({
mediaType: 'video',
}).then((video) => {
this.setState({
galleryVideo: 1,
video: video.path,
upload: true,
});
});
};
take30sVideo = async () => {
if (this.camera) {
try {
const options = {
quality: 2,
videoBitrate: 8000000,
maxDuration: 30,
};
const promise = this.camera.recordAsync(options);
if (promise) {
this.setState({recording: true});
const data = await promise;
this.setState({recording: false, upload: true});
console.log(data);
console.log('upload', this.state.upload);
}
} catch (error) {
console.log(error);
}
}
};
take60sVideo = async () => {
if (this.camera) {
try {
const options = {
quality: 2,
videoBitrate: 8000000,
maxDuration: 60,
};
const promise = this.camera.recordAsync(options);
if (promise) {
this.setState({recording: true});
const data = await promise;
this.setState({recording: false, upload: true});
console.log(data);
}
} catch (error) {
console.log(error);
}
}
};
take15sVideo = async () => {
if (this.camera) {
try {
const options = {
quality: 2,
videoBitrate: 8000000,
maxDuration: 15,
};
const promise = this.camera.recordAsync(options);
if (promise) {
this.setState({recording: true});
const data = await promise;
this.setState({recording: false, upload: true});
console.log(data);
}
} catch (error) {
console.log(error);
}
}
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: 'black',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
},
capture: {
backgroundColor: '#e75480',
borderRadius: 40,
borderWidth: 3,
borderColor: 'red',
width: 60,
height: 60,
position: 'absolute',
bottom: 0,
justifyContent: 'center',
left: '45%',
alignContent: 'center',
},
});
任何帮助将不胜感激，谢谢。