ReactNative ImagePickerIOS 使用教程
ImagePickerIOS 是 RN 里面的一个获取图片的 API,不过这个API只是在 IOS平台用的。但是官方文档只有简单的几个方法名:
static canRecordVideos(callback)
static canUseCamera(callback)
static openCameraDialog(config, successCallback, cancelCallback)
static openSelectDialog(config, successCallback, cancelCallback)
一开始以为这个 API 能够直接用,试了一下发现没有用,因为这个 API 是原生的功能模块,所以要在项目里设置一下才能用。 具体也很简单,和使用其他的第三方RN原生模块一样,要把模块添加到Libraries里面
创建项目
react-native init rnimage
用 Xcod 打开项目,开始设置,整个过程基本就是这三个图
把 node_modules/react-native/Libraries/CameraRoll 拖到 Libraries 里面去
在 BuildPhases 里面link Binary With Libraries 里面添加 libRCTCameraRoll
设置好后就可以在JS代码里直接用了
import React, { Component } from 'react';
import {
AppRegistry,
Text,
View,
ImagePickerIOS,
InteractionManager,
Image,
} from 'react-native';
export default class rnimage extends Component {
constructor() {
super();
this.state = { image: null };
}
componentDidMount() {
this.pickImage();
}
pickImage() {
ImagePickerIOS.canRecordVideos(() => alert('能获取视频'))
ImagePickerIOS.canUseCamera(() => alert('能获取图片'))
// openSelectDialog(config, successCallback, errorCallback);
ImagePickerIOS.openSelectDialog({}, () => {
this.setState({ image: imageUri });
}, error => console.error(error));
}
render() {
return (
<View style={{ flex: 1,padding: 15 }}>
<Text>ImagePickerIOS</Text>
{this.state.image?
<Image style={{ flex: 1}} source={{ uri: this.state.image }} /> :
null
}
</View>
);
}
}
AppRegistry.registerComponent('rnimage', () => rnimage);