React Native 提供了NativeModules 組件讓我們可以調(diào)用暴露在繼承ReactContextBaseJavaModule的類中的方法嬉荆。下面就一起探討下通過什么途徑能在RN視圖中調(diào)用到安卓的原生模塊（以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<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyNativeModule(reactContext)); //將實例添加到List中提供給js調(diào)用
        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

    @Override
    public List<ViewManager> 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中調(diào)用的民稱
     * @return
     */
    @Override
    public String getName() {
        return REACTCLASSNAME;
    }

    /**
     * 必須添加反射注解不然會報錯
     * 這個方法就是ReactNative將要調(diào)用的方法，會通過此類名字調(diào)用
     * @param msg
     */
    @ReactMethod
    public void callNativeMethod(String msg) {
        Toast.makeText(mContext, msg, Toast.LENGTH_SHORT).show();
        //startActivityForResult(myIntent, 1);
    }
    /**
     * 調(diào)用安卓原生頁面
     * @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

image.png

至此就可以運(yùn)行代碼驗證了

運(yùn)行結(jié)果.png

調(diào)用原生頁面 在此基礎(chǔ)之上我們寫一個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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.cadviewappproj.DemoActivity">

    <TextView
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="36dp"
        android:layout_marginTop="36dp"
        android:text="Hello World!"
        android:textSize="36sp"
        android:textStyle="bold"
    />
    <Button
        android:id="@+id/button_opencad"
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OpenCAD"
    />

</LinearLayout>

最后還必須在AndroidManifest.xml文件中進(jìn)行注冊堪藐，該文件是Android操作系統(tǒng)與應(yīng)用程序之間的接口，若沒有在該文件中聲明組件呼伸，將無法被操作系統(tǒng)識別窃判。
然后在MyNativeModule.java中添加暴露給Rn調(diào)用的方法

image.png

運(yùn)行后就可以訪問到我們剛創(chuàng)建的安卓原生頁面

image.png

以上就是Rn調(diào)用原生頁面與模塊的實現(xiàn)齿桃。