react-native - React Native Camera (RNCamera) 正在拍照，但无法录制视频

Question

我正在尝试使用 react-native-camera 包来创建一个应用程序来拍照和录制视频。我采用示例代码并将其转换为功能组件，因为它对我的应用程序是必需的。我可以拍照并存储在本地缓存中，但是录制视频的功能不起作用，并且当我 console.log 时没有显示任何输出。我还需要实施停止录制吗？我是本机反应的新手，而且我没有在任何地方正确找到功能实现的参考。我对此感到困惑。下面是代码：

 ...
 import { RNCamera } from "react-native-camera";
 
 
 const App = () => {
 let [flash, setFlash] = useState("off");
 let [zoom, setZoom] = useState(0);
 let [autoFocus, setAutoFocus] = useState("on");
 let [depth, setDepth] = useState(0);
 let [type, setType] = useState("back");
 let [permission, setPermission] = useState("undetermined");
 let [isRecording, setIsRecording] = useState("false");
   
 let cameraRef = useRef(null);
 useEffect(() => {
 Permissions.check("photo").then((response) => {
 // Response is one of: 'authorized', 'denied', 'restricted', or 'undetermined'
 setPermission(response);});
 }, []);
 const toggleFlash = () => {
 setFlash(flashModeOrder[flash]);
 };
 const zoomOut = () => {
 setZoom(zoom - 0.1 < 0 ? 0 : zoom - 0.1);
 };
 const zoomIn = () => {
 setZoom(zoom + 0.1 > 1 ? 1 : zoom + 0.1);
 };
 const takePicture = async () => {
 if (cameraRef) {
 const options = { quality: 0.5, base64: true };
 const data = await cameraRef.current.takePictureAsync(options);
 console.log(data.uri);
 }
 };
 
 const takeVideo = async () => {
 if (cameraRef && !isRecording) {
 try {
 console.log(recordingOptions);
 const recordoptions = {
 mute: false,
 maxDuration: 10,
   

     quality: RNCamera.Constants.VideoQuality["360p"],
         };
         const promise = cameraRef.current.recordAsync(recordOptions);
 
         if (promise) {
           setIsRecording(true);
           const data = await promise;
           console.log("takeVideo", data.uri);
         }
       } catch (e) {
         console.error(e);
       }
     }
   };
 
   return (
     <View style={styles.container}>
       <RNCamera
         ref={cameraRef}
         style={styles.preview}
         type={type}
         flashMode={flash}
       />
       <View style={{ flex: 0, flexDirection: "row", justifyContent: "center" }}>
         <TouchableOpacity onPress={takePicture} style={styles.capture}>
           <Text style={{ fontSize: 14 }}> TAKE PICTURE </Text>
         </TouchableOpacity>
       </View>
       <View style={{ flex: 0, flexDirection: "row", justifyContent: "center" }}>
         <TouchableOpacity onPress={takeVideo} style={styles.capture}>
           <Text style={{ fontSize: 14 }}> TAKE VIDEO </Text>
         </TouchableOpacity>
       </View>
     </View>
   );
 };
 
 export default App;

标签： react-nativereact-hooksreact-native-androidvideo-capturereact-native-camera