因為老闆叫我要幫專案上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();