本文内容

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

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

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

react-native-camera 使用

render() {
        return (
            <View style={styles.container}>
                <Camera
                    ref={(cam) => {
                        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}
                >

                    <Text style={styles.capture} onPress={this.takePicture.bind(this)}>[点击拍照]</Text>

                    /*拍照完毕，显示图片到界面上*/
                    <Image style={{width: 100, height: 100, marginBottom: 20}} source={{uri: this.state.imagePath}}>

                    </Image>
                </Camera>

            </View>
        );
    }

    /*
    * 点击拍照
    * */
    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
    }
});

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