decorate_touch/jscore/components/MultiCameraButton.js

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

class MultiCameraButton 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.showImagePicker(options, (err, selectedPhotos) => {
            if (err) {
                // 取消选择
                return;
            }
            // 选择成功，渲染图片
            this.setState({visible: false,})
            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
                }
                this.props.photos.unshift(
                    {
                        img_id: '',
                        type: 'img',
                        mime: mime,
                        uri: file,
                        fileName: fileName
                    }
                )
            }
            const itemID = this.props.itemID;
            if (this.props.maxFiles) {
                if (this.props.photos.length > this.props.maxFiles) {
                    // Toast.info('仅能上传' + this.props.maxFiles + '张照片')
                    const photos = this.props.photos.splice(0,this.props.maxFiles)
                    this.props.onFileUpload(photos,itemID)
                } else {
                    this.props.onFileUpload(this.props.photos,itemID)
                }
            }
        })
    }
    // 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 MultiCameraButton;