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目錄下會生成兩個文件,可以不用管它里面的內容,此時再重新編譯運行到手機,應該就可以正常使用了