React Native 6日目

React Nativeオープンソースライブラリreact-native-image-crop-picker使用図解
前言

React Native            、       ，React Native      ，    IOS Android，        ，
                ：“react-native-image-crop-picker”。

react-native-image-crop-picker
インポート

...
npm i react-native-image-crop-picker --save 
react-native link react-native-image-crop-picker
...

ベースの使用

...
import ImagePicker from 'react-native-image-crop-picker';

export class CameraUtils extends Component{
    constructor(props){
        super(props);
        this.state = {
            imageUrl:require('xxx.png'),
            path:''
        }
    }

    render(){
        return(
            
            
            {this.onHandlePicker()}}
                title='  '/>
            
        )
    }

    //         
    onHandlePicker(){
        //          、cropping    
        ImagePicker.openPicker({
            width:300,
            height:300,
            cropping:true
        }).then(image=>{
            console.log('    ：'+image['path']);
            console.log('  base64     ：'+image['data']);    
            console.log('    ：'+image['mime']);
            console.log('    ：'+image['width']);
            console.log('    ：'+image['height']);
            console.log('    ：'+image['size']);
            this.setState({
                path:image['path'],
                imageUrl:{uri:image['path']}
            })
        })
    }

    //    
    onHandleCamera(){
        ImagePicker.openCamera({
            width:300,
            height:300,
            cropping:true
        }).then(image=>{
            ...
        })  
    }

    //       
    onHandleScreenShot(){
        ImagePicker.openCropper({
            path:this.state.path,   //    
            width:300,
            height:300
        }).then(image =>{
            ...
        })
    }

    //         
    onHandlePickers(){
        ImagePicker.openPicker({
            multiple:true
        }).then(images=>{
            console.log('    ：'+images.length);
        })
    }
}
...

エラー解決

      ：...com.android.support:appcompat-v7:27.1.0...
   ：     /android/build.gradle
        ...
        allprojects{
            repositories{
                ...
                //  
                maven{url 'https://maven.google.com'}
                
                maven{url "https://jitpack.io"}
            }
        }
   ：     /android/app/build.gradle
        ...
        android{
            compileSdkVersion 27
            buildToolsVersion "27.0.3"
            
            defaultConfig{
                ...
                minSdkVersion 17
                targetSdkVersion 27
                vectorDrawables.useSupportLibrary = true
                ...
            }
            ...
        }