Android native embedded React native detailed _android

1. The first integrated project directory

I'm using it directly in the format of React-native Init project, which means that my Android project directory is in a directory with Node_modules.

After we init the project, the project initialization is completed, at this time we can use the command react-native run-android directly run the project, as to how to debug, has said before.

Let's talk about how we develop and run separate, we will generally choose Webstrom, developed after we will be the Android and iOS compiled separately.

Start NPM

Let's say Android is embedded in the RN environment.

Write the Android native code to invoke the RN

package com.reactdemo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
public class MainActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
private ReactInstanceManager mReactInstanceManager;
private ReactRootView mReactRootView;
@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, "ReactDemo", null);
setContentView(mReactRootView);
}
@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
mReactInstanceManager.showDevOptionsDialog();
Return true;
}
return super.onKeyUp(keyCode, event);
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
} 

Note that you want to add some permissions such as the network.

Create Package.json, add react native package

Using the command NPM init, just follow the steps and give you a screenshot:

Finally, you can see a package.json in your RN project.

Run Demo

Note: Java.lang.RuntimeException:Could not get Batchedbridge may appear, make sure your bundle is packaged correctly this error, React-nat Ive bundle-platform android-dev false-entry-file index.android.js-bundle-output reactdemo/app/src/main/assets/ INDEX.ANDROID.BUNDLE-SOURCEMAP-OUTPU reactdemo/app/src/main/assets/index.android.map-assets-dest ReactDemo/app/ src/main/res/

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.