decorate_touch/jscore/components/OpenCamera.js

import React from 'react'
import {
    TouchableOpacity,
    StyleSheet,
    Platform,
    View,
} from 'react-native'
import SyanImagePicker from 'react-native-syan-image-picker-zzly'
import RNFS from 'react-native-fs';

class OpenCamera extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
        }
    }

    render() {
        return (
            <View>
                <TouchableOpacity
                    onPress={() => this.showImagePicker()}
                    style={[this.props.style, styles.cameraBtn]}>
                    <View>
                        {this.props.children}
                    </View>
                </TouchableOpacity>
            </View>

        )
    }

    showImagePicker = () => {
        const options = {
            isOpenCheckNumStyle: true,
            isWeChatStyle: true,
            imageCount: this.props.maxFiles,            // 最大选择图片数目，默认6
            isCrop: false,           // 是否允许裁剪，imageCount 为1才生效
        };

        SyanImagePicker.openCamera(options, (err, selectedPhotos) => {
            if (err) {
                // 取消选择
                return;
            }
            // 选择成功，渲染图片
            this.setState({visible: false,})
            let photos = {}
            for (const {uri} of selectedPhotos) {
                let file;
                if (Platform.OS === 'android') {
                    file = uri
                } else {
                    file = uri.replace('file://', '')
                }
                const file_list = file.split('/');
                let fileArr = file.split('.');
                let fileName = file_list[file_list.length - 1]
                let mime = `.${fileArr[fileArr.length - 1]}`
                if (mime.indexOf('mmexport') > -1) {
                    mime = '.jpg'
                    fileName = fileName.split('.')[0] + mime
                }
                photos =
                    {
                        img_id: '',
                        type: 'img',
                        mime: mime,
                        uri: file,
                        fileName: fileName
                    }

            }
            const itemID = this.props.itemID;
            this.props.onFileUpload(photos, itemID)

            // var path = RNFS.DocumentDirectoryPath + '/test.txt';
            // console.log(22222222, this.props.photos)
            // console.log(22222222, selectedPhotos[0].uri)
            // RNFS.unlink(selectedPhotos[0].uri)
            //     .then(() => {
            //         console.log('444444444FILE DELETED444444444');
            //     })
            //     // `unlink` will throw an error, if the item to unlink does not exist
            //     .catch((err) => {
            //         console.log(555555555, err.message);
            //     });
            // const dirPicutures = '/storage/emulated/0/Android/data/com.zzliaoyuan.decorate_touch/files/Pictures/'+this.props.photos[0].fileName;
            // console.log(3333333333, dirPicutures)
            // RNFS.exists(dirPicutures)
            //     .then((result) => {
            //         console.log("file exists: ", result);
            //
            //         if (result) {
            //             return RNFS.unlink(dirPicutures)
            //                 .then(() => {
            //                     console.log('FILE DELETED');
            //                 })
            //                 // `unlink` will throw an error,if the item to unlink does not exist
            //                 .catch((err) => {
            //                     console.log(err.message);
            //                 });
            //         }
            //
            //     })
            //     .catch((err) => {
            //         console.log(err.message);
            //     });
        })
    }
    // showImagePicker1 = () => {
    //     ImagePicker.openPicker({
    //         mediaType: 'photo',
    //         multiple: true,
    //     }).then(images => {
    //         this.setState({visible: false,})
    //         for (const {path} of images) {
    //             let file;
    //             if (Platform.OS === 'android') {
    //                 file = path
    //             } else {
    //                 file = path.replace('file://', '')
    //             }
    //             const file_list = file.split('/');
    //             let fileArr = file.split('.');
    //             let fileName = file_list[file_list.length - 1]
    //             let mime = `.${fileArr[fileArr.length - 1]}`
    //             if (mime.indexOf('mmexport') > -1) {
    //                 mime = '.jpg'
    //                 fileName = fileName.split('.')[0] + mime
    //             }
    //             this.props.photos.push(
    //                 {
    //                     img_id: '',
    //                     type: 'img',
    //                     mime: mime,
    //                     uri: file,
    //                     fileName: fileName
    //                 }
    //             )
    //         }
    //         if (this.props.maxFiles) {
    //             if (this.props.photos.length > this.props.maxFiles) {
    //                 Toast.info('仅能上传' + this.props.maxFiles + '张照片')
    //                 const photos = this.props.photos.slice(0, this.props.maxFiles)
    //                 this.props.onFileUpload(photos)
    //             } else {
    //                 this.props.onFileUpload(this.props.photos)
    //             }
    //         }
    //
    //     }).catch((e) => {
    //         this.setState({visible: false,})
    //         // console.log(11111111113,e)
    //         // Toast.info('未选择文件或文件异常！',2)
    //     });
    // }
}

const styles = StyleSheet.create({
    cameraBtn: {
        padding: 5
    },
    count: {
        color: '#fff',
        fontSize: 12
    },
    fullBtn: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff'
    },
    countBox: {
        position: 'absolute',
        right: -5,
        top: -5,
        alignItems: 'center',
        backgroundColor: '#34A853',
        width: 16,
        height: 16,
        borderRadius: 8,
        justifyContent: 'center'
    }
});

export default OpenCamera;