概述
在很多的React Native开发中，我们需要调用原生的api实现调用相机和图库的功能，网上用的最多的开源库如：react-native-image-picker。关于react-native-image-picker的用法大家请看相关的文档。我们今天手动实现一份。
调用Android图库相机
创建项目
执行命令 ：
代码语言：javascript复制react-native init HeadImage创建一个名为HeadImage的工程，可以使用命令先运行下Demo项目。 然后照一张图片，放到放到工程的 HeadImageAndroidappsrcmainresdrawable 目录下。然后打开webstorm选择工程根目录，修改index.android.js代码如下：
代码语言：javascript复制export default class HeadImage extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this._clickImage}>
<Image source={{uri: 'head_default'}} style={{width:50,height:50}}/>
</TouchableOpacity>
</View>
);
}
_clickImage(){
console.log("click image...");
}
}添加React Native和原生的交互
新建两个类，HeadImageModule.Java和HeadImagePackage.java，分别继承ReactContextBaseJavaModule和ReactPackage，之后在MainApplication.java里面注册。代码如下： HeadImageModule.java
代码语言：javascript复制public class HeadImageModule extends ReactContextBaseJavaModule {
public HeadImageModule(ReactApplicationContext reactContext) {
super(reactContext);
}
@Override
public String getName() {
return "HeadImageModule"; //注意这里的返回值
}
@ReactMethod
public void callCamera() { // 调用相机的方法
Log.d("","call camera...");
}
}HeadImagePackage.java
代码语言：javascript复制public class HeadImagePackage implements ReactPackage {
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();
modules.add(new HeadImageModule(reactContext));
return modules;
}
@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}在MainApplication注册模块 MainApplication.java
代码语言：javascript复制@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new HeadImagePackage() //注册模块
);
}js调用Java代码
在index.android.js的_clickImage方法调用Java方法。代码如下：
代码语言：javascript复制_clickImage(){
NativeModules.HeadImageModule.callCamera()
}注：别忘了导包：import { NativeModules } from ‘react-native’; 到这里已经实现了js与原生的交互，接下来我们需要实现调用相机的具体逻辑了。在HeadImageModule.java里我们先定义几个常量：
代码语言：javascript复制/ 保存图片的sd卡路径
private static final String HEAD_IMAGE_PATH = Environment.getExternalStorageDirectory().getAbsolutePath() "/HeadImage/";
// 保存图片的名称
private static final String HEAD_IMAGE_NAME = "head_image.png";
// startActivityForResult 的 requestCode
private static final int REQUEST_CODE_CAMERA = 0;
private static final int REQUEST_CODE_GALLERY = 1;
private static final int REQUEST_CODE_CROP = 2;接下来实现callCamera方法（注：要让js可以调用必须加@ReactMethod，Promise），callCamera相关代码如下：
代码语言：javascript复制@ReactMethod
public void callCamera(Promise promise) {
recursionDeleteFile(); // 删除目录下除了头像图片的其他临时图片
Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);//启动相机的intent
if (isPathExists()) { // 判断常量定义的路径是否存在，不存在就创建，然后返回true
mFullPath = HEAD_IMAGE_PATH System.currentTimeMillis() ".png"; // 临时图片
mUri = Uri.fromFile(new File(mFullPath));
intent.putExtra(MediaStore.EXTRA_OUTPUT, mUri);
Activity activity = getCurrentActivity();
if (activity != null) {
mPromise = promise;
activity.startActivityForResult(intent, REQUEST_CODE_CAMERA);
}
}
}执行完这个方法就可以启动相机了，但是这样每次调用相机都会创建一个临时图片，为了不使sd卡存头像图片的文件夹越来越大，所以编写了recursionDeleteFile()方法每次做一次递归删除，删除临时图片。拍照点击完成之后，就该去onActivityResult里面处理了，rn提供了一个接口实现监听onActivityResult，在HeadImageModule.java构造方法里面添加如下代码：
代码语言：javascript复制reactContext.addActivityEventListener(new BaseActivityEventListener() {
@Override
public void onActivityResult(Activity activity, int requestCode, int resultCode, Intent data) {
if (requestCode == REQUEST_CODE_CAMERA) { // 调用相机回调
if (resultCode == Activity.RESULT_OK) { // *************1.拍照完成，将进入裁剪界面
activity.startActivityForResult(cropImage(mUri), REQUEST_CODE_CROP);// 启动裁剪界面
} else if (resultCode == Activity.RESULT_CANCELED) { // 拍照界面点击取消
mPromise.resolve(null);
// mFullPath就是callCamera里面定义的临时图片路径
// 如果没有取消拍照，那么就不执行这里，临时图片的删除将在下次调用相机的时候，所以与recursionDeleteFile()不重复
new File(mFullPath).delete();
}
} else if (requestCode == REQUEST_CODE_CROP) { // ************2.裁剪完成
if (resultCode == Activity.RESULT_OK) {
// uri存的是临时图片路径，返回给js代码，这里有个问题，稍后再说
mPromise.resolve(mUri.toString());
// 将临时图片复制一份，保存为最终的头像图片
saveHeadImage();
} else if (resultCode == Activity.RESULT_CANCELED) {
mPromise.resolve(null);
new File(mFullPath).delete();
}
}
}
});拍照完成之后就是本地裁剪图片了，这里不再讲解，后面大家直接看代码。裁剪完成之后，返回给js的图片是临时图片，而不是saveHeadImage()保存最终图片之后返回最终的图片。这里我们需要手动保存一份图片，代码如下：
代码语言：javascript复制if (resultCode == Activity.RESULT_OK) {
mPromise.resolve(mUri.toString());
// 将临时图片复制一份，保存为最终的头像图片
saveHeadImage();
}到这里，头像图片已经成功的保存到sd卡上了，接下来就是js显示的实现了，js需要处理的图片包括三个：默认头像，sd卡存的临时头像，sd卡存的最终头像，至于显示的时候我们先取最终头像，然后取临时头像。 新建MyImage.js
代码语言：javascript复制import React, {Component, PropTypes} from 'react';
import {
View,
StyleSheet,
Image,
NativeModules,
} from 'react-native';
export default class MyImage extends Component {
constructor(props) {
super(props);
this.state = {
uri: null,
};
}
static defaultProps = {
uri: null,
};
static propTypes = {
uri: PropTypes.string,
imageStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
}
async componentWillReceiveProps() {
let isExists = await NativeModules.HeadImageModule.isImageExists();
if (this.props.uri !== null) {
this.setState({
uri: this.props.uri
});
} else if (isExists) {
this.setState({
uri: await NativeModules.HeadImageModule.getImageUri()
});
} else {
this.setState({
uri: 'head_default'
});
}
}
render() {
return (
<Image source={{uri: this.state.uri}} style={this.props.imageStyle}/>
);
}
}修改index.android.js代码：
代码语言：javascript复制export default class HeadImage extends Component {
constructor(props) {
super(props);
this.state = {
headImageUri: null,
};
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this._clickImage.bind(this)}>
<MyImage uri={this.state.headImageUri} imageStyle={{width: 100,height: 100}}/>
</TouchableOpacity>
</View>
);
}
async _clickImage() {
this.setState({
headImageUri: await NativeModules.HeadImageModule.callCamera() // 相机拍照
// headImageUri: await NativeModules.HeadImageModule.callGallery() // 相册选择图片
});
}
componentDidMount() {
this.setState({
code: this.props.code
});
}
}附：源码
