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-nativecurl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfigstep 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 startScanning 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/MyApplicationLoading 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, doneBundling `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地址以及网段。
