react-native 使用 react-native-camera 实现录制视频

首先在“终端”中进入项目目录，然后执行如下命令安装最新版本的 react-native-camera

npm install react-native-camera --save

接着运行如下命令链接相关的依赖库：

react-native link react-native-camera

效果图:

IMG_2370.JPG

样例代码:
(代码中部分注释会导致报错 删除即可)

import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';


class cameraRecordScreen extends Component {
    constructor(props){
        super(props);
        this.state={
            isFlashOn:false,        //闪光灯
            isRecording:false,      //是否在录像
        }

    }

    toggleFlash(){
        this.setState({isFlashOn:!this.state.isFlashOn})
    }

    isFlashOn(){
        if (this.state.isFlashOn===false){
            return(
                {this.toggleFlash()}}>
                    
                

            )
        } else {
            return(
                {this.toggleFlash()}}>
                    
                

            )
        }

    }

    render() {
        return (
            
                
                    {({ camera, status }) => {
                        console.log(status);
                        return (
                            
                                {this.isFlashOn()}
                                {this.recordBtn(camera)}
                            
                        );
                    }}
                
            
        );
    }

    recordBtn(camera){
        if (this.state.isRecording===false){
            return(
                 this.takeRecord(camera)} style={styles.capture}>
                     摄像 
                
            )
        } else {
            return (
                 this.stopRecord(camera)} style={styles.capture}>
                     停止 
                
            )
        }
    }
    //开始录像
     takeRecord= async function(camera){
        this.setState({isRecording:true});
        const options = { quality:RNCamera.Constants.VideoQuality["480p"],maxFileSize:(100*1024*1024) };
        const data = await camera.recordAsync(options);
        console.log(data);
        this.props.navigation.navigate('parentPage',{videoUrl:data.uri})
    };
    //停止录像
    stopRecord(camera){
        this.setState({isRecording:false});
        camera.stopRecording()
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'black',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 15,
        paddingHorizontal: 20,
        alignSelf: 'center',
        margin: 20,
    },
});

export default cameraRecordScreen