npm 包 tuan-react-native-image-crop-picker 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在开发移动端应用时，如何获取用户上传的头像或其他类型图片是一个常见需求。而针对 React Native 开发者，npm 上有一个非常好用的插件叫做 tuan-react-native-image-crop-picker，它可以帮助我们方便地进行图片的拍摄、选择、剪裁等操作，大大提高了开发效率。

安装

使用该 npm 包前需要先进行安装，可以使用以下命令：

npm install tuan-react-native-image-crop-picker --save

使用方法

安装成功后，我们可以在 React Native 项目中通过下面的方式引入：

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

接下来，我们就可以使用其提供的方法进行图片的选择、拍摄等操作了：

打开图片选择器

ImagePicker.openPicker({
  width: 300,
  height: 400,
  cropping: true,
  multiple: true,
}).then(images => {
  console.log(images)
});

上述代码中，openPicker 方法为打开图片选择器，可以通过传入参数进行对选择器的自定义设置。比如设置宽高等。

其中，then 方法返回的是一个包含所有已选图片的数组对象，每个对象包含属性如下：

path：图片的本地路径。
width 和 height：图片的宽度和高度。
size：图片的大小。

打开照相机

ImagePicker.openCamera({
  width: 300,
  height: 400,
  cropping: true,
}).then(image => {
  console.log(image)
});

上述代码中，openCamera 方法为打开照相机，同样可以通过传入参数进行对选择器的自定义设置。

打开图片剪裁器

ImagePicker.openCropper({
  path: 'myFile.jpg',
  width: 300,
  height: 400,
}).then(image => {
  console.log(image);
});

上述代码中，openCropper 方法为打开图片剪裁器，其中 path 属性为需要剪裁的图片本地路径。

注意事项

在使用过程中，可能会出现某些手机不能正常使用的情况，需要在 AndroidManifest.xml 文件中添加以下代码：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-feature android:name="android.hardware.camera" android:required="true"/>
<uses-feature android:name="android.hardware.camera.autofocus" />

在 iOS 平台中，选择器在拍照完毕后不会关闭，需要手动关闭。

ImagePicker.clean().then(() => {
  console.log('done');
});

总结

通过本篇教程，相信大家已经掌握了 tuan-react-native-image-crop-picker 的基本使用方法和注意事项，希望可以帮助到大家在开发中的使用。当然，在实际开发中，还可以根据具体需求进行自定义调整，实现更丰富的功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600566c881e8991b448e325c