13518219792
这篇文章主要介绍“React Native中的Android原生模块怎么创建”，在日常操作中，相信很多人在React Native中的Android原生模块怎么创建问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”React Native中的Android原生模块怎么创建”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
创新互联专注于六安企业网站建设,成都响应式网站建设,商城网站制作。六安网站建设公司,为六安等地区提供建站服务。全流程定制设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务
创建一个 ReactPackage
启动 AndroidStudio 并且导航到 MyApp/android/app/src/main/java/com/myapp/MainActivity.java。它应该看起来像这样：
package com.myapp; import com.facebook.react.ReactActivity; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import java.util.Arrays; import java.util.List; public class MainActivity extends ReactActivity { @Override protected String getMainComponentName() { return "MyApp"; } @Override protected boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List getPackages() { return Arrays.asList( new MainReactPackage() ); } } 我们先来引入一个尚未定义的包：
import com.myapp.imagepicker.*; // import the package public class MainActivity extends ReactActivity { @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new ImagePickerPackage() // include it in getPackages ); } } 现在我们来编写那个包。我们将会为它创建一个叫 imagepicker 的新目录并且写入 ImagePickerPackage:
package com.myapp.imagepicker; import com.facebook.react.ReactPackage; import com.facebook.react.bridge.JavaScriptModule; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; import java.util.ArrayList; import java.util.Collections; import java.util.List; public class ImagePickerPackage implements ReactPackage { @Override public List createNativeModules(ReactApplicationContext reactContext) { List modules = new ArrayList<>(); modules.add(new ImagePickerModule(reactContext)); return modules; } @Override public List> createJSModules() { return Collections.emptyList(); } @Override public List createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } } 现在我们已经创建了一个包并且包含进 MainActivity 中了。
创建一个 ReactContextBaseJavaModule
我们将会以创建 ImagePickerModule 开始，继承 ReactContextBaseJavaModule。
package com.myapp.imagepicker; import com.facebook.react.bridge.ReactContextBaseJavaModule; public class ImagePickerModule extends ReactContextBaseJavaModule { public ImagePickerModule(ReactApplicationContext reactContext) { super(reactContext); } }这是一个好的开始，为了 React Native 能从 NativeModules 找到我们的模块，我们需要覆写 getName 方法。
@Override public String getName() { return "ImagePicker"; }我们现在有了一个可以被 JavaScript 代码导入的 native 模块，让它做些有趣的事情吧。
暴露方法
ImagePickerIOS 定义了 openSelectDialog 方法，可以传递配置对象、失败、成功的回调。让我们在 ImagePickerModule 中定义一个相似的方法。
import com.facebook.react.bridge.Callback; import com.facebook.react.bridge.ReadableMap; public class ImagePickerModule extends ReactContextBaseJavaModule { @ReactMethod public void openSelectDialog(ReadableMap config, Callback successCallback, Callback cancelCallback) { Activity currentActivity = getCurrentActivity(); if (currentActivity == null) { cancelCallback.invoke("Activity doesn't exist"); return; } } }这里我们从 React Native 中导入了 Callback 和 ReadableMap 来对应 JavaScript 中的 function 和 object。我们为这个方法加上@ReactMethod 注解，从而使它作为 ImagePicker 的一部分被 JavaScript 引用。
在方法体中我们获取当前的 activity，如果没有获取到 activity，就调用 cancel 的回调方法。我们现在有了一个可以运行的方法，但是它还不能做任何有趣的事情。让我们用它打开相册。
public class ImagePickerModule extends ReactContextBaseJavaModule { private static final int PICK_IMAGE = 1; private Callback pickerSuccessCallback; private Callback pickerCancelCallback; @ReactMethod public void openSelectDialog(ReadableMap config, Callback successCallback, Callback cancelCallback) { Activity currentActivity = getCurrentActivity(); if (currentActivity == null) { cancelCallback.invoke("Activity doesn't exist"); return; } pickerSuccessCallback = successCallback; pickerCancelCallback = cancelCallback; try { final Intent galleryIntent = new Intent(); galleryIntent.setType("image/*"); galleryIntent.setAction(Intent.ACTION_GET_CONTENT); final Intent chooserIntent = Intent.createChooser(galleryIntent, "Pick an image"); currentActivity.startActivityForResult(chooserIntent, PICK_IMAGE); } catch (Exception e) { cancelCallback.invoke(e); } } }首先，我们设置了回调，然后，我们创建了一个 Intent 并把它传递给 startActivityForResult。***，我们把所有的东西都放在 try/catch 块中来处理可能发生的异常。
当你调用 openSelectDialog 时，你应该可以看到一个相册了。然而，当你选择一张图片时，相册并不做任何事情。为了能够处理图片数据，我们需要在模块中处理 activity 的返回值。
首先，我们需要在 react context 中添加 activity event listener：
public class ImagePickerModule extends ReactContextBaseJavaModule implements ActivityEventListener { public ImagePickerModule(ReactApplicationContext reactContext) { super(reactContext); reactContext.addActivityEventListener(this); } }现在我们可以获取到相册返回的数据了。
@Override public void onActivityResult(final int requestCode, final int resultCode, final Intent intent) { if (pickerSuccessCallback != null) { if (resultCode == Activity.RESULT_CANCELED) { pickerCancelCallback.invoke("ImagePicker was cancelled"); } else if (resultCode == Activity.RESULT_OK) { Uri uri = intent.getData(); if (uri == null) { pickerCancelCallback.invoke("No image data found"); } else { try { pickerSuccessCallback.invoke(uri); } catch (Exception e) { pickerCancelCallback.invoke("No image data found"); } } } } }在这里我们应该可以通过 success callback 获取到图片 URI。
NativeModules.ImagePicker.openSelectDialog( {}, // no config yet (uri) => { console.log(uri) }, (error) => { console.log(error) } )到此，关于“React Native中的Android原生模块怎么创建”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！
