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.打成本地包後斷開服務運行也可以加載項目