ReactNative嵌入到現有原生安卓應用

2019-11-09 17:41:40

字體：大中小

來源：轉載

供稿：網友

嵌入到現有原生應用

簡書：React Native起步－將RN嵌入到現有的Android應用中

CSDN：Android原生嵌入React Native 過程中遇見的各種坑

build.gradle

allPRojects { repositories { mavenLocal() jcenter() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../reactNativeTest/node_modules/react-native/android" } }}

修改app/build.gradle

ndk { abiFilters "armeabi-v7a", "x86"}compile "com.facebook.react:react-native:+"

創建 ReactActivity

package com.cyb.reactnativetestproj;import android.app.Activity;import android.os.Bundle;import android.view.KeyEvent;import com.facebook.react.ReactInstanceManager;import com.facebook.react.ReactRootView;import com.facebook.react.common.LifecycleState;import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;import com.facebook.react.shell.MainReactPackage;/** * ReactNative * Created by cyb on 2016/11/26. */public class ReactActivity extends Activity implements DefaultHardwareBackBtnHandler{ private ReactRootView mReactRootView; private ReactInstanceManager mReactInstanceManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mReactRootView = new ReactRootView(this); mReactInstanceManager = ReactInstanceManager.builder() .setapplication(getApplication()) .setBundleAssetName("index.android.bundle") .setJSMainModuleName("index.android") .addPackage(new MainReactPackage()) .setUseDeveloperSupport(BuildConfig.DEBUG) .setInitialLifecycleState(LifecycleState.RESUMED) .build(); mReactRootView.startReactApplication(mReactInstanceManager, "reactNativeTest", null); setContentView(mReactRootView); } @Override public void invokeDefaultOnBackPressed() { super.onBackPressed(); } @Override public void onBackPressed() { super.onBackPressed(); if(mReactInstanceManager != null){ mReactInstanceManager.onBackPressed(); } } @Override protected void onResume() { super.onResume(); if(mReactInstanceManager != null){ mReactInstanceManager.onHostResume(this, this); } } @Override protected void onPause() { super.onPause(); if(mReactInstanceManager != null){ mReactInstanceManager.onHostPause(this); } } @Override protected void onDestroy() { super.onDestroy(); if(mReactInstanceManager != null){ mReactInstanceManager.onHostDestroy(this); } } //我們需要改動一下開發者菜單。默認情況下，任何開發者菜單都可以通過搖晃或者設備類觸發 // ，不過這對模擬器不是很有用。所以我們讓它在按下Menu鍵的時候可以顯示 @Override public boolean onKeyUp(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null){ mReactInstanceManager.showDevOptionsDialog(); return true; } return super.onKeyUp(keyCode, event); }}

上一篇：初學者使用接口回調傳值

下一篇：OkHttp的使用