在已有的Android工程中接入ReactNative

1、新建一個android工程

2、在工程的build.gradle中添加

maven {

url "$rootDir/node_modules/react-native/android"

}

3、在app的build.gradle中添加(1)android標簽中

splits {

abi {

reset()

enable true

universalApk true// If true, also generate a universal APK

include "armeabi-v7a","x86"

}?

}

configurations.all {

resolutionStrategy.force'com.google.code.findbugs:jsr305:3.0.0'

}


(2)dependencies中添加compile'com.facebook.react:react-native:+'

(3)編譯(這里要注意 minSdkVersion 必須要16或者16以上,否則編譯會出錯的)

至此 Android studio中的配置完成接下來是ReactNative的配置

1、打開控制臺,進入項目的根目錄 分別執行以下命令

npm init

npm install –save react

npm install –save react-native

npm init的時候會需要填寫名字版本號等,可以隨便填寫

完成以上命令后 工程目錄下會出現一個package.json文件 我們可以從其他已創建的ReactNative工程中拷貝一個package.json和一個index.android.js文件到項目的根目錄

接下來是創建一個Activity用來加載ReactNative

importandroid.os.Bundle;

importandroid.support.v7.app.AppCompatActivity;

importcom.facebook.react.ReactInstanceManager;

importcom.facebook.react.ReactRootView;

importcom.facebook.react.common.LifecycleState;

importcom.facebook.react.modules.core.DefaultHardwareBackBtnHandler;

importcom.facebook.react.shell.MainReactPackage;

public class MyRNActivity extends AppCompatActivity implements ?DefaultHardwareBackBtnHandler {

private ReactRootView mReactRootView;

private ReactInstanceManager mReactInstanceManager;

@Override

protected voidonCreate(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,"RNAndroidDemo", null);

setContentView(mReactRootView);

}

@Override

public void invokeDefaultOnBackPressed() {

super.onBackPressed();

}

}


上面的RNAndroidDemo是package.json中的name的值

接著創建一個Application

public class MainApplication extends Application implements ReactApplication {

private finalReactNativeHost mReactNativeHost=new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage()

);

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this,/* native exopackage */false);

}

}

然后在AndroidManifest.xml中添加

<uses-permission android:name="android.permission.INTERNET"/>

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW"/>

application標簽中添加name 為 android:name=".MainApplication"

添加RN的Activity<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"

/>

現在配置基本完成了 運行到手機 跳轉到RN頁面時應該會出現一些錯誤 Could not connect to development server ?首先搖一搖手機出現一個列表,選擇Dev Settings 然后選擇Debug server host &port for device在彈出的對話框中輸入你的ip+:8081如192.168.1.1:8081確認后再搖一搖手機選擇Reload,此時如果出現Could not get BatchedBridge, make sure your bundle is packaged correctly錯誤,先在工程的main目錄下新建目錄assets然后打開控制臺,進入項目的根目錄然后執行命令react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest src/main/res/完成后在項目的assets目錄下會生成兩個文件,可以不用管它里面的內容,此時再重新編譯運行到手機,應該就可以正常使用了


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容