我自己实现的用于拍照、从相册选择、录像的库,支持iOS和Android,另外在模拟器上无法录像。这个库是纯JS实现的UI,如果对样式不满意,或者有较大修改,可以自由的Fork更改JS代码,相对于更改原生代码要简单很多。
Github地址:https://github.com/gaoxiaosong/react-native-full-image-picker
支持如下功能:
- 使用相机拍照
- 视频录制
- 从相册选择
- iPhone X系列设备的安全区域
- 竖屏和横屏模式
- 多选或多拍模式
- 拍照、选择或录像后预览功能
- 最大数量限制
截图
在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
属性的值。