RN如何调用安卓原生页面与模块

React Native 提供了NativeModules 组件让我们可以调用暴露在继承ReactContextBaseJavaModule的类中的方法。下面就一起探讨下通过什么途径能在RN视图中调用到安卓的原生模块（以Toast为例）
首先在工程Android的src》main》java》com》myProject 下添加MyReactPackage.java与MyNativeModule.java

工程目录.png

MyReactPackage.java

package com.cadviewappproj;

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 MyReactPackage implements ReactPackage {

    @Override
    public List createNativeModules(ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new MyNativeModule(reactContext)); //将实例添加到List中提供给js调用
        return modules;
    }

    @Override
    public List> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

MyNativeModule.java

package com.cadviewappproj;

import android.content.Context;
import android.widget.Toast;
import android.content.Intent;
import android.app.Activity;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;


public class MyNativeModule extends ReactContextBaseJavaModule {

    public static final String REACTCLASSNAME = "MyNativeModule";
    private Context mContext;

    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    /**
     * 必须重写该方法 该方法的返回值就是js中调用的民称
     * @return
     */
    @Override
    public String getName() {
        return REACTCLASSNAME;
    }

    /**
     * 必须添加反射注解不然会报错
     * 这个方法就是ReactNative将要调用的方法，会通过此类名字调用
     * @param msg
     */
    @ReactMethod
    public void callNativeMethod(String msg) {
        Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
        //startActivityForResult(myIntent, 1);
    }
    /**
     * 调用安卓原生页面
     * @param fileUrl
     */
    @ReactMethod
    public void startActivityByString(String fileUrl){
        try {
            ReactApplicationContext context = getReactApplicationContext();
            Activity activity = context.getCurrentActivity();
            if (activity != null) {
                Intent intent = new Intent(context, DemoActivity.class);
                intent.putExtra("file",fileUrl);
                //activity.startActivity(intent);
                activity.startActivityForResult(intent,0);
            }
        } catch (Exception e) {
            Toast.makeText(mContext, "错误了", Toast.LENGTH_SHORT).show();
        }
    }
}

完成以上步骤后还必须修改MainApplication.java

image.png

;
最后修改 index.android.js

image.png

至此就可以运行代码验证了

运行结果.png

调用原生页面 在此基础之上我们写一个Activity跟一个xml页面

DemoActivity

package com.cadviewappproj;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;


public class DemoActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_demo);

        View goBack = findViewById(R.id.button_opencad);
        goBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                onBackPressed();
            }
        });
    }
}

activity_demo.xml

最后还必须在AndroidManifest.xml文件中进行注册，该文件是Android操作系统与应用程序之间的接口，若没有在该文件中声明组件，将无法被操作系统识别。
然后在MyNativeModule.java中添加暴露给Rn调用的方法

image.png

运行后就可以访问到我们刚创建的安卓原生页面

image.png

以上就是Rn调用原生页面与模块的实现。