React Native Android原生模組

因為老闆叫我要幫專案上Auth0,所以就在研究如何插入原生的java模組

新版React Native的MainActivity會繼承ReactActivity

onCreate的方法就會被他包起來而無法使用

所以要透過他內建的getPackages來新增模組

public class MainActivity extends ReactActivity {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new LockReactPackage()
        );
    }
}

剛剛在getPackages插入的物件是ReactPackage的實作

這三個方法都是必須實作的對象

但我們不需要提供JS模組和View

所以直接傳空的回去給他

createNativeModules則是用來插入真正存放模組內容的物件

public class LockReactPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();

        modules.add(new LockReactModule(reactContext));

        return modules;
    }

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return new ArrayList<>();
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return new ArrayList<>();
    }
}

因為物件在getPackages的時候會new一次

所以constructor就相當於原來Android的onCreate

onCreate的時候程式還沒載入完成,所以不能getApplicationContext,要等到React開起來之後從JavaScript來叫

如果方法要給JavaScript叫的話,上面要加@ReactMethod才行

public class LockReactModule extends ReactContextBaseJavaModule {

    private final LocalBroadcastManager broadcastManager;

    public LockReactModule(ReactApplicationContext reactApplicationContext) {
        super(reactApplicationContext);

        this.broadcastManager = LocalBroadcastManager.getInstance(reactApplicationContext.getApplicationContext());
        this.broadcastManager.registerReceiver(new BroadcastReceiver() {
            @Override
            public void onReceive(Context context, Intent intent) {
                UserProfile profile = intent.getParcelableExtra(Lock.AUTHENTICATION_ACTION_PROFILE_PARAMETER);
                Token token = intent.getParcelableExtra(Lock.AUTHENTICATION_ACTION_TOKEN_PARAMETER);
                //Your code to handle login information.
            }
        }, new IntentFilter(Lock.AUTHENTICATION_ACTION));
    }

    @ReactMethod
    public void intercept() {
        Lock.Builder lockBuilder = new Lock.Builder()
                .loadFromApplication(getCurrentActivity().getApplication())
                .closable(true);

        LockContext.configureLock(lockBuilder);

        Intent lockIntent = new Intent(getReactApplicationContext().getApplicationContext(), LockActivity.class);
        lockIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        getReactApplicationContext().getApplicationContext().startActivity(lockIntent);
    }

    @Override
    public String getName() {
        return "Auth0LockModule";
    }
}

接著來到JavaScript的方面

從react-native那邊就可以直接引入模組

但模組的名字要看剛剛LockReactModule那邊寫的getName回傳了什麼

var { NativeModules } = require('react-native');
module.exports = NativeModules.Auth0LockModule;

只要執行上面那兩行把模組輸出之後就可以呼叫LockReactModule裡面寫的@ReactMethod了

var LockModule = require('./auth0lock');
LockModule.intercept();

留言

  1. 你好,我目前在集成一个android的第三方im的功能到我的react native android应用;
    我遇到的问题是在收到im信息后,无法通过该第三方模块的localbroadcastReceiver,onReceive 的上下文呼叫react 的 DeviceEventManagerModule 向js端发送信息;
    你能帮助我吗,感谢

取消回覆

粗體斜體刪除線連結引用圖片程式碼

注意:您的電子信箱將不會被公開,且網站連結不會被搜尋引擎採計

{124} {123} {122} {121} {120} {119} {118} {117} {116} {115} {114} {113} {112} {111} {100} {025} {024} {023} {022} {021} {020} {019} {018} {017} {016} {015} {014} {013} {012} {011} {010} {009} {008} {007} {006} {005} {004} {003} {002} {001}