React Native+Android/iOS混合开发

一.初始化项目--有两种方式：
1.安装一个不含Android和iOS模块的React Native项目
（1）进入workspace文件夹
（2）直接初始化一个React Native项目
         react-native init RNBearin
（3）进入RNBearin文件夹，把android（之后称其为：android剪切）整个文件夹剪切出来复制到其他文件夹备用，把Android项目复制到RNBearin文件夹下，并改名为android（之后称其为：android项目）。
（4）把android剪切android\gradle\wrapper\gradle-wrapper.properties里面的东西复制到android项目中

         把android剪切android\settings.gradle里面的东西合并到android项目中

         把android剪切里面两个build.gradle文件里面的东西分别合并到android项目中

         把android剪切里面gradle.properties文件里面的东西分别合并到android项目中

（5）添加网络权限
<uses-permission android:name="android.permission.INTERNET" />
（6）如果用到Dev Settings功能，即添加RN的调试Activity,需要在application下添加
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>
（7）在app下的build.gradle里面android下的defaultConfig中添加
 ndk {
            abiFilters "armeabi", "x86"
        }

（8）在RNBearin文件夹下创建index.js文件并添加如下代码：
import {AppRegistry} from 'react-native';
import App from './js/App';

AppRegistry.registerComponent('RNBearin', () => App);

（9）在RNBearin文件夹创建js文件夹，并在js文件夹下创建App.js文件，并添加代码：
import React, {Component} from 'react';
import {Platform,StyleSheet,Text,View} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>This is App</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});
（10）在webstorm设置里面Languages&Frameworks下的JavaScript把JavaScript langua version设置为Flow
（11）在Android项目里面创建RNPageActivity（带界面xml）,RNPageActivity，添加生命周期，添加开发者菜单，Ctrl + M 打开RN开发者菜单，双击R 重新加载JS，完整代码如下

public class RNPageActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private static String moduleName;
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    private boolean mDeveloperSupport = true;
    private DoubleTapReloadRecognizer mDoubleTapReloadRecognizer;

    public static void start(Context context, String moduleName, String initParams) {
        RNPageActivity.moduleName = moduleName;
        Intent intent = new Intent(context, RNPageActivity.class);
        intent.putExtra("initParams", initParams);
        context.startActivity(intent);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        Bundle bundle = new Bundle();//RN初始化时传递给JS的初始化数据
        // The string here (e.g. "MyReactNativeApp") has to match
        // the string in AppRegistry.registerComponent() in index.js
        mReactRootView.startReactApplication(mReactInstanceManager, moduleName, bundle);

        setContentView(mReactRootView);
        mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
        if (getSupportActionBar() != null) {
            getSupportActionBar().hide();
        }
    }

    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (getUseDeveloperSupport()) {
            if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打开RN开发者菜单
                mReactInstanceManager.showDevOptionsDialog();
                return true;
            }
            boolean didDoubleTapR = Assertions.assertNotNull(mDoubleTapReloadRecognizer).didDoubleTapR(keyCode, getCurrentFocus());
            if (didDoubleTapR) {//双击R 重新加载JS
                mReactInstanceManager.getDevSupportManager().handleReloadJS();
                return true;
            }
        }
        return super.onKeyUp(keyCode, event);
    }

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

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    //    @Override
    //    protected String getMainComponentName() {
    //        return moduleName;
    //    }
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

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

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
        }
    }

    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
        } else {
            super.onBackPressed();
        }
    }

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

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }

    public boolean getUseDeveloperSupport() {
        return mReactInstanceManager != null && mDeveloperSupport;
    }
}

二.剩下的参考：

1.Android混合开发

http://www.imooc.com/article/253170

1.iOS混合开发

http://www.imooc.com/article/253167

三.混合代码打包：

Android混合代码打包

1.  assets如果不存在需要参加资源文件夹：assets

2.  react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

3.打成本地包后断开服务运行也可以加载项目