如果你正在开发基于 React Native 的移动应用，那么肯定会遇到需要使用图片的情况。而 react-native-image-intent 是一个优秀的 npm 包，可以帮助你实现移动设备上的图片选择、相机拍摄和裁剪等功能。本文将介绍如何使用 react-native-image-intent。
安装
在 React Native 项目中使用 react-native-image-intent 需要先进行安装：
npm install --save react-native-image-intent
安装完成后，需要运行以下命令进行链接：
react-native link react-native-image-intent
此外，你还需要在 AndroidManifest.xml 文件中添加以下权限：
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
使用
使用 react-native-image-intent 需要引入 ImageIntent 组件：
import ImageIntent from 'react-native-image-intent';
图片选择
可以使用 ImageIntent.pickImage 方法来选择一张图片。该方法会打开 Android 系统的图片选择器，让用户选择一张图片。
-- -------------------- ---- -------
-----------------------
------ ------- -- -----
----------------------------- --------- -- ----------
--------------------- ----- -- -------
------------------ ----- -- -------
-------- --- -- ----
--
-------------- -- -
---------------------- -- ----
--
------------ -- -
------------------- -- ----
---相机拍摄
可以使用 ImageIntent.takePicture 方法来打开相机进行拍摄。
-- -------------------- ---- -------
-------------------------
------ ----- -- -----
--------------------- ----- -- -------
------------------ ----- -- -------
-------- ---- -- ----
------ ----- -- ----
------- ---- -- ----
--
-------------- -- -
---------------------- -- ----
--
------------ -- -
------------------- -- ----
---图片裁剪
可以使用 ImageIntent.cropImage 方法来对选择的图片进行裁剪。该方法会打开 Android 系统的图片裁剪器，让用户对图片进行裁剪。
-- -------------------- ---- -------
-----------------------
----- ----------------------------------------------------- -- ----
------ ------- -- -----
------------------ ----- -- -------
---------------- ----- -- -------
------ ---- -- --------
------- ---- -- --------
-------- --- -- ----
--
-------------- -- -
---------------------- -- ----
--
------------ -- -
------------------- -- ----
---DEMO
以下是一个基于 react-native-image-intent 实现的图片选择、相机拍摄和裁剪的 DEMO，你可以参考这个 DEMO 来应用 react-native-image-intent：
-- -------------------- ---- -------
------ ------ ---------- ---- --------
------ ------ ----- ------ ----------------- ---- ---------------
------ ----------- ---- ----------------------------
----- --- - -- -- -
----- ------- --------- - ---------------
----- --------- - -- -- -
-----------------------
------ -------
----------------------------- ---------
--------------------- -----
------------------ -----
-------- ---
--
-------------- -- -
----------------------
-----------------------
--
------------ -- -
-------------------
---
--
----- ----------- - -- -- -
-------------------------
------ -----
--------------------- -----
------------------ -----
-------- ----
------ -----
------- ----
--
-------------- -- -
----------------------
-----------------------
--
------------ -- -
-------------------
---
--
----- --------- - -- -- -
-- -------- -
------------------
-------
-
-----------------------
----- ------
------ -------
------------------ -----
---------------- -----
------ ----
------- ----
-------- ---
--
-------------- -- -
----------------------
-----------------------
--
------------ -- -
-------------------
---
--
------ -
----- ------------- -- --------------- --------- ----------- -----------
------ -- ------ ------------- ------- -------------- ---- ------- ----- ---
----------------- --------------------
-----------------
-------------------
----------------- ----------------------
---------------
-------------------
----------------- --------------------
-----------------
-------------------
-------
--
--
------ ------- ----总结
react-native-image-intent 是一个方便易用的 npm 包，可以帮助开发者快速实现图片选择、相机拍摄和裁剪等功能。本文已经介绍了如何安装和使用 react-native-image-intent，同时也提供了一个完整的 DEMO，希望可以帮助到你的开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bff81e8991b448d99ed