Reactjs 从“多媒体资料”中选择时，屏幕上不显示视频

我有一个视频音频录制应用程序，其中我有两个场景：

我用react本机摄像机录制了一段视频并上传了该视频

我想从画廊上传视频，并将其显示在主屏幕上，而不是以前的摄像头屏幕上

但是，当我从多媒体资料中选择一个视频并返回到主屏幕时，该视频不会出现在主屏幕上，而相机屏幕仍在那里。我用控制台检查我的视频状态是否为空，但它正在接收来自多媒体资料的视频。我猜有一些风格重叠的问题，我无法理解

下面是我所写的确切代码：

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',
  },
});

import React，{PureComponent}来自'React'；
从“react native”导入{样式表、文本、TouchableOpacity、视图}；
从“react native camera”导入{RNCamera}；
从“react native vector icons/Entypo”导入图标；
从“react native image crop picker”导入ImagePicker；
从“react native Video”导入视频；
导出默认类组件{
建造师（道具）{
超级（道具）；
此.state={
录音：错，
处理：对，
上传：false，
galleryVideo:“”，
视频：''，
};
}
render（）{
返回(
{this.state.upload==true(
this.props.navigation.navigate（'Post'，{key:1}）}>
下一个
)：null}
{
this.camera=ref；
}}
style={style.preview}
类型={RNCamera.Constants.type.back}
flashMode={RNCamera.Constants.flashMode.on}
androidCameraPermissionOptions={{
标题：“使用相机的权限”，
信息：“我们需要您的许可才能使用您的相机”，
buttonPositive:“Ok”，
按钮否定：“取消”，
}}
androidRecordAudioPermissionOptions={{
标题：“使用录音的许可”，
消息：“我们需要您的许可才能使用您的音频”，
buttonPositive:“Ok”，
按钮否定：“取消”，
}}
captureAudio={true}
/>
15秒
60年代
{this.state.upload===false(
上传
)：null}
{this.state.galleryVideo===1&&this.state.video！=''(
)：null}
);
}
视频=（）=>{
ImagePicker.openPicker({
mediaType:“视频”，
})。然后（（视频）=>{
这是我的国家({
画廊视频：1，
视频：video.path，
上传：对，
});
});
};
take30sVideo=async（）=>{
如果（这个相机）{
试一试{
常量选项={
质量:2,，
视频比特率：8000000，
最大持续时间：30，
};
const promise=this.camera.recordAsync（选项）；
如果（承诺）{
this.setState（{recording:true}）；
常数数据=等待承诺；
this.setState（{recording:false，upload:true}）；
控制台日志（数据）；
console.log（'upload'，this.state.upload）；
}
}捕获（错误）{
console.log（错误）；
}
}
};
take60sVideo=async（）=>{
如果（这个相机）{
试一试{
常量选项={
质量:2,，
视频比特率：8000000，
最大持续时间：60，
};
const promise=this.camera.recordAsync（选项）；
如果（承诺）{
this.setState（{recording:true}）；
常数数据=等待承诺；
this.setState（{recording:false，upload:true}）；
控制台日志（数据）；
}
}捕获（错误）{
console.log（错误）；
}
}
};
take15sVideo=async（）=>{
如果（这个相机）{
试一试{
常量选项={
质量:2,，
视频比特率：8000000，
最大持续时间：15，
};
const promise=this.camera.recordAsync（选项）；
如果（承诺）{
this.setState（{recording:true}）；
常数数据=等待承诺；
this.setState（{recording:false，upload:true}）；
控制台日志（数据）；
}
}捕获（错误）{
console.log（错误）；
}
}
};
}
const styles=StyleSheet.create({
容器：{
弹性：1，
flexDirection:'列'，
背景颜色：“黑色”，
},
预览：{
弹性：1，
justifyContent:“柔性端”，
对齐项目：“居中”，
},
捕获：{
背景颜色：“#e75480”，
边界半径：40，
边框宽度：3，
边框颜色：“红色”，
宽度：60，
身高：60，
位置：'绝对'，
底部：0，
为内容辩护：“中心”，
左：45%，
对齐内容：“中心”，
},
});

任何帮助都将不胜感激，谢谢