本文內(nèi)容

自定義相機拍照，上傳圖片

react-native-image-picker這個同樣可以實現(xiàn)相機拍照，但是是調(diào)用的系統(tǒng)的相機，相對于自定義較為簡單，功能很強大。

react-native-camera這個可以實現(xiàn)自定義相機的界面效果

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
    }
});

這樣，得到圖片的路徑，就可以上傳圖片了，上傳的代碼參考上上一篇文章