React Native拍照、从相册选择、录像的实现

1字数 529阅读 3994

我自己实现的用于拍照、从相册选择、录像的库,支持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;

其中XXXPageXXXView是库的导出项。可以参照源代码来修改defaultProps属性的值。

其他文章