React Native拍照、从相册选择、录像的实现
2018-11-29 本文已影响39人
爱翻身的咸鱼
我自己实现的用于拍照、从相册选择、录像的库，支持iOS和Android，另外在模拟器上无法录像。这个库是纯JS实现的UI，如果对样式不满意，或者有较大修改，可以自由的Fork更改JS代码，相对于更改原生代码要简单很多。
Github地址：https://github.com/gaoxiaosong/react-native-full-image-picker
支持如下功能：
- 使用相机拍照
- 视频录制
- 从相册选择
- iPhone X系列设备的安全区域
- 竖屏和横屏模式
- 多选或多拍模式
- 拍照、选择或录像后预览功能
- 最大数量限制
截图
camera.gif
album.gif
在Android上有同样的UI，因为全是Javascript实现的。
安装
可以使用NPM或Yarn安装(二者选其一):
npm install --save react-native-full-image-picker
yarn add react-native-full-image-picker
然后需要安装以下第三方库的原生部分代码：
使用
首先导入库：
import * as ImagePicker from 'react-native-full-image-picker';
它有三个方法：
-
ImagePicker.getCamera(options): 拍照 -
ImagePicker.getVideo(options): 录像 -
ImagePicker.getAlbum(options): 从相册选择
options是一个对象，包含如下键:
-
callback: (data: any[]) => void: 回调方法，传回照片或视频的数组。 -
maxSize?: number: 照片的最大数量。在拍照和从相册选择模式下生效。 -
sideType?: RNCamera.Constants.Type: 镜头，前置还是后置。在拍照和录像模式下生效。 -
flashMode?: RNCamera.Constants.FlashMode: 闪光灯。在拍照和录像模式下生效。
你可以使用react-native-general-actionsheet来展示一个ActionSheet，这个库跟ActionSheetIOS有同样的API和UI。
改变标签文字
你可以导入页面，然后通过修改defaultProps来全局的改变标签文本：
import * as ImagePicker from 'react-native-full-image-picker';
ImagePicker.XXXPage.defaultProps.xxx = yyy;
ImagePicker.XXXView.defaultProps.xxx = yyy;
其中XXXPage或XXXView是库的导出项。可以参照源代码来修改defaultProps属性的值。
