React native 如何使相机的背景变黑？

问题：

我已经创建了react native camera，但它看起来是这样的

但问题是相机动作图标的背景色是透明的

这是我的密码

import React, {useState, useEffect} from 'react';
import {
  AppRegistry,
  StyleSheet,
  TouchableOpacity,
  View,
  Image,
  CameraRoll,
  Platform,
} from 'react-native';
import IoniconsIcon from 'react-native-vector-icons/Ionicons';
import EntypoIcon from 'react-native-vector-icons/Entypo';
import AppText from '_components/appText';
import {RNCamera} from 'react-native-camera';
import normalize from '_utils/fontsize';
let countRecordTime;

const PendingView = () => (
  <View
    style={{
      flex: 1,
      backgroundColor: 'lightgreen',
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <AppText>Waiting</AppText>
  </View>
);

const takePicture = async (camera) => {
  const options = {quality: 1};
  const data = await camera.takePictureAsync(options);
  console.log(data.uri);
};

const recordVideo = async (
  camera,
  recording,
  seconds,
  setRecording,
  setSeconds,
) => {
  if (camera) {
    if (!recording) {
      startRecording(recording, setRecording, seconds, setSeconds, camera);
    } else {
      stopRecording(camera, setSeconds);
    }
  }
};

const startRecording = async (
  recording,
  setRecording,
  seconds,
  setSeconds,
  camera,
) => {
  setRecording(true);
  console.log('>>>>>> start recording seconds', seconds);
  const cameraConfig = {maxDuration: 20};
  const data = await camera.recordAsync(cameraConfig);
  console.log('>>>>>> data', data);
  setRecording(false);
};

const stopRecording = (camera, setSeconds) => {
  camera.stopRecording();
  setSeconds(0);
};

const secondsToMMSS = (seconds) => {
  console.log('>>>>>> seconds', seconds);
  let m = Math.floor(seconds / 60);
  let s = Math.floor(seconds % 60);

  let mDisplay = m < 10 ? `0${m}` : `${m}`;
  let sDisplay = s < 10 ? `0${s}` : `${s}`;
  return `${mDisplay}:${sDisplay}`;
};

const VideoRecording = (props) => {
  const [type, setType] = useState(RNCamera.Constants.Type.back);
  const [flashMode, setFlashMode] = useState(RNCamera.Constants.FlashMode.off);
  const [recording, setRecording] = useState(false);
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    if (recording) {
      countRecordTime = setInterval(() => setSeconds(seconds + 1), 1000);
    }
    if (!recording && countRecordTime) {
      clearInterval(countRecordTime);
    }

    if (seconds === 20 && countRecordTime) {
      clearInterval(countRecordTime);
      setRecording(false);
    }

    return () => {
      if (countRecordTime) {
        clearInterval(countRecordTime);
      }
    };
  }, [recording, seconds]);

  return (
    <View style={styles.container}>
      <RNCamera
        style={styles.preview}
        autoFocus={RNCamera.Constants.AutoFocus.on}
        type={type}
        flashMode={flashMode}
        faceDetectionMode={RNCamera.Constants.FaceDetection.Mode.fast}
        ratio="4:3"
        whiteBalance={RNCamera.Constants.WhiteBalance.auto}
        captureAudio={true}
        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',
        }}>
        {({camera, status, recordAudioPermissionStatus}) => {
          if (status !== 'READY') {
            return <PendingView />;
          }
          return (
            <>
              <View
                style={{
                  flex: 0,
                  flexDirection: 'row',
                  justifyContent: 'center',
                }}>
                <TouchableOpacity
                  style={styles.capture}
                  onPress={(_) => {
                    switch (flashMode) {
                      case RNCamera.Constants.FlashMode.off:
                        setFlashMode(RNCamera.Constants.FlashMode.auto);
                        break;

                      case RNCamera.Constants.FlashMode.auto:
                        setFlashMode(RNCamera.Constants.FlashMode.on);
                        break;

                      case RNCamera.Constants.FlashMode.on:
                        setFlashMode(RNCamera.Constants.FlashMode.off);
                        break;
                    }
                  }}>
                  <Image
                    source={
                      flashMode === RNCamera.Constants.FlashMode.auto
                        ? require('../../assets/img/flashAuto.png')
                        : flashMode === RNCamera.Constants.FlashMode.on
                        ? require('../../assets/img/flashOn.png')
                        : require('../../assets/img/flashOff.png')
                    }
                    style={{width: 30, height: 30}}
                    resizeMode={'contain'}
                  />
                </TouchableOpacity>
                {/* <TouchableOpacity
                  onPress={() => takePicture(camera)}
                  style={styles.capture}>
                  <Image
                    source={require('../../assets/img/cameraButton.png')}
                    style={{width: 50, height: 50}}
                    resizeMode={'contain'}
                  />
                </TouchableOpacity> */}
                <TouchableOpacity
                  style={styles.iconContainer}
                  onPress={() =>
                    recordVideo(
                      camera,
                      recording,
                      seconds,
                      setRecording,
                      setSeconds,
                    )
                  }>
                  <EntypoIcon
                    style={styles.icon}
                    size={40}
                    color={recording ? 'red' : 'white'}
                    name="video-camera"
                  />
                  {recording ? (
                    <AppText styles={styles.recordingTime}>
                      {secondsToMMSS(seconds)}
                    </AppText>
                  ) : null}
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.capture}
                  onPress={(_) => {
                    if (type === RNCamera.Constants.Type.back) {
                      setType(RNCamera.Constants.Type.front);
                    } else {
                      setType(RNCamera.Constants.Type.back);
                    }
                  }}>
                  <Image
                    source={require('../../assets/img/cameraFlipIcon.png')}
                    style={{width: 40, height: 40}}
                    resizeMode={'contain'}
                  />
                </TouchableOpacity>
              </View>
              <TouchableOpacity style={styles.closeButton} onPress={() => {}}>
                <IoniconsIcon
                  name={'ios-close'}
                  style={styles.closeButtonIcon}
                />
              </TouchableOpacity>
            </>
          );
        }}
      </RNCamera>
    </View>
  );
};

export default VideoRecording;

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: 'black',
  },
  capture: {
    flex: 0,
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
  cptureView: {
    backgroundColor: '#ffffff',
    width: 100,
    height: 100,
    borderRadius: 100,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: '20%',
    marginTop: '5%',
  },
  camIcon: {
    color: '#858181',
  },
  iconContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  icon: {
    marginHorizontal: 15,
    // paddingVertical: 10,
  },
  recordingTime: {
    color: 'red',
  },
  closeButton: {
    position: 'absolute',
    backgroundColor: '#aaaaaab0',
    width: 50,
    height: 50,
    borderRadius: 25,
    justifyContent: 'center',
    top: Platform.OS === 'ios' ? 45 : 10,
    left: 10,
  },
  closeButtonIcon: {
    fontSize: Platform.OS === 'ios' ? 40 : 40,
    fontWeight: 'bold',
    alignSelf: 'center',
    lineHeight: Platform.OS === 'ios' ? 58 : 40,
  },
});

import React，{useState，useffect}来自“React”；
进口{
评估学，
样式表，
可触摸不透明度，
看法
形象,，
摄影师，
平台，
}从“反应本机”；
从“反应本机向量图标/Ionicons”导入IoniconsIcon；
从“react native vector icons/Entypo”导入EntypoIcon；
从“_components/AppText”导入AppText；
从“react native camera”导入{RNCamera}；
从“_utils/fontsize”导入规范化；
让我们记录下时间；
const PendingView=（）=>(
等待
);
const takePicture=async（摄像头）=>{
const options={quality:1}；
const data=wait camera.takePictureAsync（选项）；
log（data.uri）；
};
const recordVideo=async(
摄像机，
记录，
秒，
设置录制，
设置秒，
) => {
如果（照相机）{
如果（！录制）{
开始录制（录制、设置录制、秒、设置秒、摄像头）；
}否则{
停止录制（摄像机，设置秒）；
}
}
};
常量startRecording=异步(
记录，
设置录制，
秒，
设置秒，
摄像机，
) => {
设置录制（真）；
console.log（“>>>>>开始录制秒数”，秒数）；
常量cameraConfig={maxDuration:20}；
const data=wait camera.recordAsync（cameraConfig）；
console.log（“>>>>>数据”，数据）；
设置录制（假）；
};
const stopRecording=（摄像机，设置秒）=>{
照相机。停止录制（）；
设置秒（0）；
};
const secondsToMMSS=（秒）=>{
console.log（“>>>>>秒”，秒）；
设m=数学地板（秒/60）；
设s=数学地板（秒数%60）；
设mDisplay=m<10？`0${m}`:`${m}`；
设sDisplay=s<10？`0${s}`:`${s}`；
返回`${mDisplay}:${sDisplay}`；
};
常量录像=（道具）=>{
const[type，setType]=useState（RNCamera.Constants.type.back）；
const[flashMode，setFlashMode]=useState（RNCamera.Constants.flashMode.off）；
const[recording，setRecording]=使用状态（false）；
常数[秒，设置秒]=使用状态（0）；
useffect（（）=>{
如果（录音）{
countRecordTime=setInterval（（）=>setSeconds（秒+1），1000）；
}
if（！录制和计数录制时间）{
clearInterval（countRecordTime）；
}
如果（秒===20&&countRecordTime）{
clearInterval（countRecordTime）；
设置录制（假）；
}
return（）=>{
如果（计数记录时间）{
clearInterval（countRecordTime）；
}
};
}，[录音，秒]；
返回(
{（{摄像头，状态，recordAudioPermissionStatus}）=>{
如果（状态！=“准备就绪”）{
返回；
}
返回(
{
开关（闪光模式）{
案例RNCamera.Constants.FlashMode.off：
setFlashMode（RNCamera.Constants.FlashMode.auto）；
打破
案例RNCamera.Constants.FlashMode.auto：
设置FlashMode（RNCamera.Constants.FlashMode.on）；
打破
案例RNCamera.Constants.FlashMode.on：
设置FlashMode（RNCamera.Constants.FlashMode.off）；
打破
}
}}>
{/*拍照（照相机）}
style={style.capture}>
*/}
录影带(
摄像机，
记录，
秒，
设置录制，
设置秒，
)
}>
{录音(
{secondsToMMSS（秒）}
)：null}
{
if（type==RNCamera.Constants.type.back）{
setType（RNCamera.Constants.Type.front）；
}否则{
setType（RNCamera.Constants.Type.back）；
}
}}>
{}}>
);
}}
);
};
导出默认录像；
const styles=StyleSheet.create({
容器：{
位置：'绝对'，
左:0,，
右:0,，
排名：0，
底部：0，
},
预览：{
弹性：1，
justifyContent:“柔性端”，
对齐项目：“居中”，
背景颜色：“黑色”，
},
捕获：{
弹性：0，
边界半径：5，
填充：15，
水平方向：20，
对齐自我：“中心”，
差额：20，
},
cptureView：{
背景颜色：“#ffffff”，
宽度：100，
身高：100，
边界半径：100，
对齐项目：“居中”，
为内容辩护：“中心”，
保证金底部：“20%”，
马金托普：“5%，
},
卡米肯：{
颜色：“#858181”，
},
iconContainer：{
为内容辩护：“中心”，
对齐项目：“居中”，
},
图标：{
marginHorizontal:15，
//填充垂直：10，
},
录制时间：{
颜色：“红色”，
},
关闭按钮：{
位置：'绝对'，
背景颜色：“#aaaaaa b0”，
宽度：50，
身高：50，
边界半径：25，
为内容辩护：“中心”，
top:Platform.OS=='ios'？45:10，
左:10,，
},
关闭按钮尼康：{
fontSize:Platform.OS=='ios'？40:40，
fontWeight:'粗体'，
对齐自我：“中心”，
线宽：Platform.OS=='ios'？58:40，
},
});

有人能帮我把它弄黑吗？我做了很多努力想找到一个方法来做到这一点。但我不能这样做，如果有人能帮助我，我将不胜感激。非常感谢。

您尝过这个吗

。。。
{
开关（闪光模式