RN-第三方-react-native-camera,调用相机拍摄图片

本文内容

自定义相机拍照,上传图片

react-native-image-picker这个同样可以实现相机拍照,但是是调用的系统的相机,相对于自定义较为简单,功能很强大。

react-native-camera这个可以实现自定义相机的界面效果

react-native-camera 使用

render() {
        return (
            
                 {
                        this.camera = cam;
                    }}
                    // Camera.constants.CaptureTarget.cameraRoll (default), 相册
                    // Camera.constants.CaptureTarget.disk, 本地
                    // Camera.constants.CaptureTarget.temp  缓存
                    // 很重要的一个属性,最好不要使用默认的,使用disk或者temp,
                    // 如果使用了cameraRoll,则返回的path路径为相册路径,图片没办法显示到界面上
                    captureTarget={Camera.constants.CaptureTarget.temp}
                    mirrorImage={false}
                    //"high" (default),"medium",  "low",  "photo", "1080p",  "720p",  "480p".
                    captureQuality="medium"
                    style={styles.preview}
                    aspect={Camera.constants.Aspect.fill}
                >

                    [点击拍照]

                    /*拍照完毕,显示图片到界面上*/
                    

                    
                

            
        );
    }

    /*
    * 点击拍照
    * */
    takePicture() {
        //jpegQuality 1-100, 压缩图片
        const options = {jpegQuality: 50};

        this.camera.capture({options})

            .then((data) =>{
                console.log(data);

                /*图片本地路径*/
                this.setState({
                    imagePath: data.path,
                });

                /*获取图片大小*/
                Image.getSize(data.path,(width,height) =>{
                    console.log(width,height);
                });

            })
            .catch(err => console.error(err));

    }


const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 5,
        color: '#000',
        padding: 10,
        margin: 40
    }
});

这样,得到图片的路径,就可以上传图片了,上传的代码参考上上一篇文章

你可能感兴趣的:(RN-第三方-react-native-camera,调用相机拍摄图片)