Existing Android Project Integration ReactNative page

Existing Android Project Integration ReactNative page

React Native comes from Facebook and has just updated the document. I almost gave up on it, but I got it back. Compared with others, it is guaranteed by big companies and big brands. if you want to know more, read it online.

 

Let's take a look at Android Guides in Docs.

Integrating with Existing Apps

It teaches you how to integrate ReactNative in an existing Android project. There are some problems with the document. Let me talk about it slowly.

1. JS framework

Creating HelloWorld is essential.

Set node_modules as described in the configuration JS document. In the project, callnpm install --save react-nativeHowever, the speed is very slow, and almost impossible tasks (I have not completed it). However, this react-native should be generic. Download and copy a copy, and place it in the root directory.

Usereact-native init AwesomeProjectGenerate a test project and copy the node_modules of the AwesomeProject project.

Changing the server can also increase the download speed.

$ npm install -g cnpm --registry=http://registry.npm.taobao.org

You also need to copy package. json. You can also usenpm initConfiguration, but it is quite troublesome. You need to add more parameters.

Package. json content

{  name: AwesomeProject,  version: 0.0.1,  private: true,  scripts: {    start: node_modules/react-native/packager/packager.sh  },  dependencies: {    react-native: ^0.12.0  }}

Then call the last command.
curl -o .flowconfig https://raw.githubusercontent.com
/facebook/react-native/master/.flowconfig

Create HTML5 Homepageindex.android.js, Edit it according to the document.

This completes the JS framework configuration of react-native.

2. Add code

Add and set the code belowbuild.gradleTo integrate the maven library of react-native.
compile 'com.facebook.react:react-native:0.13.0'
Add permission

My code is slightly different from the Demo. In essence, I add H5 pages in ReactRootView.
Resource file

Source file, mainly set ReactRootView.

    private ReactRootView mReactRootView;    private ReactInstanceManager mReactInstanceManager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mReactRootView = (ReactRootView) findViewById(R.id.test_js);        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, MyAwesomeApp, null);//        setContentView(mReactRootView);    }    @Override    public void invokeDefaultOnBackPressed() {        super.onBackPressed();    }    @Override    protected void onPause() {        super.onPause();        if (mReactInstanceManager != null) {            mReactInstanceManager.onPause();        }    }    @Override    protected void onResume() {        super.onResume();        if (mReactInstanceManager != null) {            mReactInstanceManager.onResume(this);        }    }    @Override    public void onBackPressed() {        if (mReactInstanceManager != null) {            mReactInstanceManager.onBackPressed();        } else {            super.onBackPressed();        }    }    @Override    public boolean onKeyUp(int keyCode, KeyEvent event) {        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {            mReactInstanceManager.showDevOptionsDialog();            return true;        }        return super.onKeyUp(keyCode, event);    }

The basic code section has been configured.

3. Real machine debugging

The last step is to start the configuration and debug the Android real machine.
Add ndk support in build. gradle.

    defaultConfig {        ndk {            abiFilters armeabi-v7a, x86        }    }

In gradle. properties, add the ndk option.

android.useDeprecatedNdk=true

The purpose of setting ndk is to set the Debug Server Host and IP address.
Enter the project root directory to start the servicenpm start

Then start the App. The initial Page is a red error page. Shake the phone and selectDev Settings, Select the lastDebug server host for deviceTo write the current network IP address.

ThenReload JS

OK, enjoy it.