react native结合Android原生实现调用相机或图库选择图片设置头像

这种功能网上已经有了许多开源组件，虽然是现成的，不过也是需要学习如何使用的，集成到自己项目的过程中可能也会遇到一些问题，而且开源的功能也不一定能够完全的符合自己的需求，所以试着自己实现一下，欢迎大家分享自己的观点和意见。

实现思路很简单，就是原生部分调用相机将拍照的图片保存到sd卡，js部分负责显示。将图片保存的sd卡是为了下次启动应用的时候头像依然有效，也可以上传到服务器。编写代码使用webStorm 和 androidStudio。

下面开始实现：
首先执行命令 react-native init HeadImage 创建一个名为HeadImage的工程，创建好工程后执行 react-native run-android 看看是否能编译运行

然后找一张图片 head_default.png（命名随意）作为默认头像，放到工程的 HeadImage\android\app\src\main\res\drawable 目录下，rn默认工程没有drawable可以自己新建一个，然后webstorm选择工程根目录打开，修改index.android.js代码

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...");
    }
}

修改了render方法，t添加_clickImage方法，TouchableOpacity和Image组件别忘了import

注意Image的uri要与自己放在HeadImage\android\app\src\main\res\drawable目录下的默认头像图片命名一致，之后编译运行（必须编译运行，因为加了资源图片，只是reload是不显示图片的），运行结果将显示默认头像，点击打出log

接下来实现与原生的交互，参考 http://reactnative.cn/docs/0.31/native-modules-android.html#content

androidstudio打开工程的android目录

新建两个类，HeadImageModule.java和HeadImagePackage.java，分别继承ReactContextBaseJavaModule和ReactPackage，之后在MainApplication.java里面注册，各部分代码如下：

HeadImageModule.java

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

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();
    }
}