react-native-image-crop-picker

前言：为了满足app上传头像的需求，要从相册里取出一张图片然后进行裁剪，最后上传。

一、安装

yarn add react-native-image-crop-picker

运行项目时，检查一下/android/build.gradle 文件，查看gradle版本，如果运行报错：nexpected element ＜queries＞ found in ＜manifest＞，就要升级gradle

dependencies {
        //3.5.3是不行的可以一直升级到4.2.2  ，之后用Android studio重新下载gradle依赖
        classpath("com.android.tools.build:gradle:4.2.2")
}

二、选择一张图片，进行裁剪

import React from "react";
import { View, Text, PermissionsAndroid, Button } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';

class CropPicker extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }
    render() {
        return (
            <View>
                <Text style={{ padding: 20, backgroundColor: 'pink' }} onPress={this.selectImage}>点击按钮进入相册</Text>
            </View>
        );
    }
    selectImage = () => {
       ImagePicker.openPicker({
                width: 300,
                height: 400,
                cropping: true,
            }).then(image => {
                console.log(image);
            }).catch(err => {
                    console.log("没有选择照片");
            })
    }
}

export default CropPicker;

进入后：第一张选择图片，第二张是裁剪图片

             

确实选择图片的时候，很丑，没法像微信或者qq那样直接进入相机胶卷，剩下获取到图片文件对象，你用Image组件怎么显示随你

三、拍照（方法是ImagePicker.openCamera）

这个需要权限申请权限

1. 在Android的AndroidManifest.xml 添加权限申请，不然无法，无法弹出权限询问框

<!-- 请求访问相机 -->
<uses-permission android:name="android.permission.CAMERA"/>

2. 权限验证

参考react native 官网 PermissionsAndroid 

在上面的代码基础上，添加如下

<Button title="请求拍照" onPress={requestCameraPermission} />


//这个放在组件函数外面，作为一个单独函数
const requestCameraPermission = async () => {
    try {
        const granted = await PermissionsAndroid.request(
            PermissionsAndroid.PERMISSIONS.CAMERA,
            {
                title: "Cool Photo App Camera Permission",
                message:
                    "Cool Photo App needs access to your camera " +
                    "so you can take awesome pictures.",
                buttonNeutral: "Ask Me Later",
                buttonNegative: "Cancel",
                buttonPositive: "OK"
            }
        );
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
            ImagePicker.openCamera({
                width: 300,
                height: 400,
                cropping: true,
            }).then(image => {
                console.log(image);
            }).catch(err => {
                    console.log("没有拍照");
            })
        } else {
            console.log("Camera permission denied");
        }
    } catch (err) {
        console.warn(err);
    }
};

未来的努力方向：选择图片的时候，像微信或者qq那样直接进入相机胶卷