React-Native调用Android原生相机与相册实现头像功能

本文主要介绍了如何在React Native (RN) 应用中调用原生Android系统的相机功能进行拍照和从相册选择图片，并确保兼容Android 7.0及以上版本。作者提供了详细的步骤和代码示例，使得RN应用能够与Android原生代码交互。 在RN中调用Android原生功能，首先需要在Android端创建一个ReactContextBaseJavaModule子类的模块。这个模块会包含调用相机和选择照片的方法。接着，将这个模块添加到ReactPackage列表，以便在JavaScript (JS) 端可以使用。对于原生模块的创建和JS中的调用方式，可以参考指定的博客文章链接：[链接](https://blog.csdn.net/weixin_38824257/article/details/103905668)。 以下是具体实现步骤： 1. 创建ReactContextBaseJavaModule子类： 创建一个名为`ReactCameraPickerModule`的类，继承自`ReactContextBaseJavaModule`。在这个类中，定义两个@ReactMethod注解的方法，分别用于拍照和选择照片。这些方法接收一个Promise对象作为参数，用于将拍摄的照片或选择的图片结果回传给JavaScript。 ```java public class ReactCameraPickerModule extends ReactContextBaseJavaModule { private Promise mPromise; // 拍照方法 @ReactMethod public void openCamera(Promise promise) { if (hasPermission()) { mPromise = promise; takePhoto(); } } // 检查权限 private boolean hasPermission() { // ... } // 执行拍照操作 private void takePhoto() { // ... } } ``` 2. 权限管理： 对于Android 6.0及以上版本，需要动态申请相机和存储权限。可以使用`ContextCompat.checkSelfPermission()`检查权限状态，并通过`ActivityCompat.requestPermissions()`请求权限。 3. 调用相机服务： 在`takePhoto()`方法中，使用Intent启动相机应用。完成后，可以通过重写`onActivityResult()`处理返回的结果，将拍摄的图片数据转换成适合RN使用的格式，并通过Promise返回给JS。 4. 选择相册图片： 类似地，可以添加一个方法来调用系统图库，让用户选择图片。使用Intent启动图库应用，然后在`onActivityResult()`中处理返回的图片选择结果。 5. 处理返回结果： 在`onActivityResult()`中，获取图片的URI，根据Android版本选择合适的方式读取图片数据（如Bitmap），将其转换为Base64字符串或者文件路径，再通过Promise传递给RN。 6. 在JavaScript中调用： 在JS端，引入创建的原生模块，并调用相应的方法。例如，`reactCameraPickerModule.openCamera()`来触发拍照或选择图片，然后处理返回的数据。 通过以上步骤，RN应用就能实现调用Android原生相机和相册，并将拍摄或选择的照片用作头像。注意在实际开发中，还需要考虑错误处理、用户取消操作等情况，确保用户体验的顺畅。