美文网首页
一步步教你如何创建React Native的原生Android模

一步步教你如何创建React Native的原生Android模

作者: NextStack | 来源:发表于2016-08-18 22:56 被阅读0次

    在查阅了官方文档以及大量的翻译还有各种转载文章之后,对RN创建Android原生模块还是云里雾里。
    这不在多次实验之后,终于悟通其中的关键,其实非常的简单,这里我进行一个记录提供给各位需要的朋友。

    初始化项目

    这里就不多说了,我们进行项目初始化完毕后,用Android Studio打开项目中的android目录下的build.gradle文件。如图:

    打开项目

    创建Module

    步骤:

    1. 右键app/java/com.projectName,新建Java Class
    2. 新建的类继承ReactContextBaseJavaModule,然后补充实现方法(善于利用代码提示与补全
    3. 新建一个@ReactMethod方法,用于测试

    ** 不想太啰嗦,直接录制成了gif给各位看官:**

    创建Module

    示例代码

    package com.mynative;
    
    import android.util.Log;
    
    import com.facebook.react.bridge.ReactApplicationContext;
    import com.facebook.react.bridge.ReactContextBaseJavaModule;
    import com.facebook.react.bridge.ReactMethod;
    
    public class MyModule extends ReactContextBaseJavaModule {
        public MyModule(ReactApplicationContext reactContext) {
            super(reactContext);
        }
    
        // 这里返回一个模块名称字符串,便于我们在 js中调用
        @Override
        public String getName() {
            return "MyModule";
        }
    
        //  创建一个方法
        @ReactMethod
        public void hi(String name) {
            Log.v("ReactNativeJS", name);
        }
    }
    

    创建Package

    方法同上,我们新建一个名为MyPackageJava Class,然后利用代码补全与提示把剩下的方法加上,如图:

    创建Package

    示例代码

    package com.mynative;
    
    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 MyPackage implements ReactPackage {
        @Override
        public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
            List<NativeModule> modules = new ArrayList<>();
            modules.add(new MyModule(reactContext));
            return modules;
        }
    
        @Override
        public List<Class<? extends JavaScriptModule>> createJSModules() {
            return Collections.emptyList();
        }
    
        @Override
        public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }
    }
    

    注册模块

    到此,我们的模块已经创建完毕,下一步直接在MainApplication中注册即可使用了:

    注册模块

    调用模块

    原生代码编写完毕后,需要重新打包部署app,然后我们在js代码中这么屌用:

    import { NativeModules } from 'react-native';
    
    const myModule = NativeModules.MyModule; // 这里的MyModule为我们上边getName函数返回的name
    
    // 调用方法
    myModule.hi('react-native!');
    

    总结

    这里很多详细的地方没写,因为我觉得没必要,在文档以及其他人的翻译文章中都有说明了。
    这里主要就是讲解一些困惑点,比如怎么创建模块、怎么自动填写类方法等。

    相关文章

      网友评论

          本文标题:一步步教你如何创建React Native的原生Android模

          本文链接:https://www.haomeiwen.com/subject/putbsttx.html