关于React-native里Android原生模块和组件的写法

最新推荐文章于 2024-11-03 16:05:00 发布

Rlusia

最新推荐文章于 2024-11-03 16:05:00 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： React Native 文章标签： android rn 原生模块

本文链接：https://blog.youkuaiyun.com/black_dreamer/article/details/51902187

React Native 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在React Native应用中创建Android原生模块，以便将Android API暴露给JavaScript调用，实现高性能功能，如多线程、图片处理等。通过一个具体的Toast模块示例，详细说明了继承ReactContextBaseJavaModule、创建ReactPackage以及在MainActivity中注册的过程。同时，针对遇到的错误统计问题，提出了在Android Studio中进行清理、构建和运行的解决步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原生模块就是把Android里的API导出来给JS调用,说简单一点,就是让自己写的Java函数能够在React Native的js代码里调用。比如一些实现高性能的、多线程的代码，还有譬如图片处理、数据库、或者各种高级扩展等等。
举个栗子：
Toast模块：
1、继承ReactContextBaseJavaModule类，实现安卓里面的Toast功能(就是调用Toast.makeText(*))，代码如下：

public class ToastModules extends ReactContextBaseJavaModule {
    private static final String MODULES_NAME_TOAST = "ToastAndroid1" ;
    private static final String TOAST_LONG_KEY = "LONG" ;
    private static final String TOAST_SHORT_KEY = "SHORT" ;
    public ToastModules(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    @Nullable
    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>() ;
        constants.put(TOAST_LONG_KEY, Toast.LENGTH_LONG) ;
        constants.put(TOAST_SHORT_KEY, Toast.LENGTH_SHORT) ;
        return constants;
    }
    @Override
    public String getName() {
        return MODULES_NAME_TOAST;
    }
    @ReactMethod
    public void show(String txt , int duration) {
        Toast.makeText(getReactApplicationContext(),txt,duration).show() ;
    }
}

2、创建类实现ReactPackage：

public class AppReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>() ;
        modules.add(new LogModule(reactContext)) ;
        modules.add(new ToastModules(reactContext)) ;
        return modules ;
    }
    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

3、在MainActivity.java里注册AppReactPackage:

 @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),new AppRactPackages();
        );
    }

错误统计：

Running application with appParams: {"initialProps":{},"rootTag":1}.
__DEV__ === true, development-level warning are ON, performance optimizations are OFF

解决方法：在AS里clean一下project，然后gradle，然后start package，run-android。

问题参考：https://github.com/facebook/react-native/issues/3685