在已有的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目录下会生成两个文件,可以不用管它里面的内容,此时再重新编译运行到手机,应该就可以正常使用了


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容