【React Native】嵌入原生app之踩坑Android篇

在Project中集成React Native

• step1 在Project的目录下面运行 npm init 命令

pengcx@pengcx-Ubuntu:~/AndroidStudioProjects/ReactNativeTest$ npm init  
This utility will walk you through creating a package.json file.  
It only covers the most common items, and tries to guess sensible defaults.  

See `npm help json` for definitive documentation on these fields  
and exactly what they do.  

Use `npm install <pkg> --save` afterwards to install a package and  
save it as a dependency in the package.json file.  

Press ^C at any time to quit.  
name: (ReactNativeTest) node_modules  
Sorry, node_modules is a blacklisted name.  
name: (ReactNativeTest) react_native  
version: (1.0.0)  
description: reactnative.cn  
entry point: (index.js)  
test command: make test  
git repository:  
keywords:  
author:  
license: (ISC)  
About to write to /home/pengcx/AndroidStudioProjects/ReactNativeTest/package.json:  

{  
  "name": "react_native",  
  "version": "1.0.0",  
  "description": "reactnative.cn",  
  "main": "index.js",  
  "scripts": {  
    "test": "make test"  
  },  
  "author": "",  
  "license": "ISC"  
}  

Is this ok? (yes) yes  

• step 2 运行如下命令

npm install --save react react-native
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

• step 3 在Package.json的文件中的script节点下，添加如下代码。text的节点后加上逗号

"start": "node node_modules/react-native/local-cli/cli.js start"

• step 4 首先在项目根目录中创建index.android.js文件，代码如下所示

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
//这里的名字不需要与Package.json的项目名称一致

• step 5 在app的gradle文件中添加ReactNative的依赖，如下所示

 dependencies {
     ...
     compile "com.facebook.react:react-native:+" // From node_modules.
 }

• step 6 在Project的gradle文件中，添加ReactNative的本地maven目录，具体如下

allprojects {
    repositories {
        jcenter()
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

• step7 在AndroiMainfest.xml文件中添加如下代码

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
<application>
       <!-- 添加RN的调试Activity -->
   <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

• step 8 添加Android代码

public class RNActivity extends Activity implements DefaultHardwareBackBtnHandler {


    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;

    @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, "HelloWorld", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }


    @Override
    protected void onPause() {
        super.onPause();

    }

    @Override
    protected void onResume() {
        super.onResume();

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

    }

    //    We also need to pass back button events to React Native:
    @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);
    }

}
//如果你的项目名字不是叫“HelloWorld”，则需要将“index.android.js”中的“AppRegistry.registerComponent()”方法中的第一个参数替换为对应的名字。

- step 9 清单文件中配置

<activity android:name=".RNActivity"></activity>

- step 10 运行 react-native start命令

dst56728:MyApplication CARCH$ react-native start
Scanning 430 folders for symlinks in /Users/CARCH/android/MyApplication/node_modules (156ms)
 ┌────────────────────────────────────────────────────────────────────────────┐
 │  Running packager on port 8081.                                            │
 │                                                                            │
 │  Keep this packager running while developing on any JS projects. Feel      │
 │  free to close this tab and run your own packager instance if you          │
 │  prefer.                                                                   │
 │                                                                            │
 │  https://github.com/facebook/react-native                                  │
 │                                                                            │
 └────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
   /Users/CARCH/android/MyApplication

Loading dependency graph...
React packager ready.

Loading dependency graph, done.
Bundling `index.android.js`
  Transforming modules  100.0% (390/390), done.
Bundling `index.android.js`
  Updating 1 module in place, done
Bundling `index.android.js`
  No module changed.
Bundling `index.android.js`
  No module changed.

楼主遇到的问题

• libgnustl_shared.so” is 32-bit instead of 64-bit报错问题
• 解决方案

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

        packagingOptions {
            exclude "lib/arm64-v8a/librealm-jni.so"
        }

• 安卓嵌入react native 环境的步骤，Could not get BatchedBridge, make sure your bundle is packaged correctly问题的解决

首先确认手机的网和电脑的网在不在同一网段。
然后需要查看React Packger是否Loading Js 文件。
设置Dev Setting的ip地址以及网段。