简介
在 React Native 开发过程中，往往需要让用户上传图片。而 react-native-image-picker-shefenqi 是一个方便实用的 npm 包，用于在 React Native 应用中，访问本地设备的图片库，选取照片，并将其上传至服务器端。
该包在底层集成了 iOS 和 Android 平台的原生图片选取组件，提供了相当方便的调用方式和参数配置。如果你正在开发 React Native 应用，那么本篇文章将告诉你如何使用它。
安装
使用 npm 安装：
npm install --save react-native-image-picker-shefenqi
配置
安装完成后，我们需要进行一些配置。
在 iOS 项目中，需要在 Info.plist 文件中增加以下配置：
<key>NSCameraUsageDescription</key> <string>$(PRODUCT_NAME) would like to use your camera</string> <key>NSPhotoLibraryUsageDescription</key> <string>$(PRODUCT_NAME) would like to access your photo gallery</string>
在 Android 项目中，需要在 AndroidManifest.xml 文件中增加以下配置：
<uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
另外，需要在 build.gradle 中添加以下配置：
android {
...
defaultConfig {
...
missingDimensionStrategy 'react-native-camera', 'general'
}
}使用
import 引入该模块：
import ImagePicker from 'react-native-image-picker-shefenqi';
使用该模块前，我们需要选择一些默认参数：
-- -------------------- ---- -------
----- ------- - -
------ ------- -------- -- ------
------------------ ---------
--------------------- ----- ---------- -- ---------
----------------------------- ------- ---- ------------ -- -------------
--------------- -
----------- -----
----- ---------
--
--其中 title 是选择器的标题，cancelButtonTitle 是取消按钮的文字，takePhotoButtonTitle 是选择拍照按钮的文字，chooseFromLibraryButtonTitle 是选择从相册中选取按钮的文字。
storgeOptions 中的选项用于指定保存图片的路径和是否跳过备份。
调用 ImagePicker.showImagePicker 方法，展示选择器，并在图片被选择后，返回相关信息：
-- -------------------- ---- -------
------------------------------------ ---------- -- -
--------------------- - -- ----------
-- -------------------- -
----------------- --------- ----- ---------
- ---- -- ---------------- -
------------------------ ------ -- ----------------
- ---- -- ----------------------- -
----------------- ------ ------ ------- -- -----------------------
- ---- -
----- ------ - - ---- ------------ --
-- -------------
-
---示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ------ ---------------- - ---- ---------------
------ ----------- ---- -------------------------------------
----- ------- - -
------ ------- --------
------------------ ---------
--------------------- ----- ----------
----------------------------- ------- ---- ------------
--------------- -
----------- -----
----- ---------
--
--
----- --- ------- --------- -
------------------ -
-------------
---------- - -
------------- -----
--
-
-------- - -- -- -
------------------------------------ ---------- -- -
--------------------- - -- ----------
-- -------------------- -
----------------- --------- ----- ---------
- ---- -- ---------------- -
------------------------ ------ -- ----------------
- ---- -- ----------------------- -
----------------- ------ ------ ------- -- -----------------------
- ---- -
----- ------ - - ---- ------------ --
--------------- ------------- ------ ---
-
---
-
-------- -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
----------------- ------------------------
------------------------ --- ---- - -
------------ - ------------
- - -
------ -------------------------------- -------- ------ ---- ------- --- -- --
--
-------------------
-------
--
-
-
------ ------- ----效果预览：
至此，你已经成功地使用了 react-native-image-picker-shefenqi。如果你正在开发 React Native 应用，使用该模块可大大提高用户体验和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822585