android原有项目中集成react-native

react-native集成小结（各种坑）

react-native环境搭建参考

先要有个android项目
配置环境
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
android原有项目中集成react-native，为了保证后面文件下载顺利请设置镜像

**1.**主要根据提醒生成package.json文件，填写自己的信息，也可一路回车键，全都是默认之后在生成的文件里面修改，也可以直接copy已有的文件，就不用生成了

npm init

**2.**安装React和React Native 执行结束会根目录多一个node_modules文件夹
(1)不能在项目编译的同时执行命令，否则报错提示没有权限（保证项目中的app下的build文件不被占用）
(2)必须用管理员权限去运行cmd

npm install --save react react-native

**3.**在项目的根目录新建.flowconfig，然后把下面地址在浏览器打开内容copy过来就行了

https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

**4.**在app/src/main/下创建assets文件夹（路径不能错哦）执行如下命令生成bundle

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

**5.**文件配置

1.在app的build.gradle中添加,下面是完整的build.gralde,有对应注释

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
    defaultConfig {
        applicationId "study.moa.com.react2"
        minSdkVersion 16// 1 此处必须>=16
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

        // 2 添加ndk支持
        ndk { abiFilters "armeabi-v7a", "x86" }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }

    // 3 防止报错
    configurations.all {
        resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
    }

    // 4 排除库 （可选）
    packagingOptions { exclude "lib/arm64-v8a" }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:26.+'
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha7'
    testCompile 'junit:junit:4.12'

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

2.配置根目录的build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.3.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        jcenter()

        // 此处必须修改，不然会下载老版本的react-native，导致编译失败
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

3.配置网络权限 AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="study.moa.com.myreactdemo" >

    <!--网络权限-->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:name=".MainApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!--debug activity-->
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

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

    </application>

</manifest>

4.创建一个activity实现DefaultHardwareBackBtnHandler接口

public class MyReactActivity 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(true)// 此处设置调试模式
            .setInitialLifecycleState(LifecycleState.RESUMED)//
            .build();
            // 这里的HelloWorld名字必须要和index.android.js中的
            // AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
            // 名字相同
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);
        
        setContentView(mReactRootView);
    }
    
    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
    
    @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
    protected void onDestroy() {
        super.onDestroy();
        
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy();
        }
    }
    
    @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);
    }
}

5.创建Application实现ReactApplication

public class MainApplication extends Application implements ReactApplication {

    public static Context appContext;
    private static MainApplication instance;

    @Override
    public void onCreate() {
        super.onCreate();
        instance = this;
        appContext = getApplicationContext();
        SoLoader.init(this,false);
    }

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {


        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

}

6.最后需要添加package.json配置

{
  "name": "myreactdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node node_modules/react-native/local-cli/cli.js start"// 运行时需要添加
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.0.0",
    "react-native": "^0.48.4"
  }
}

至此项目集成完成，下面运行。
可以在android studio中直接运行android项目，然后跳转到MyReactActivity界面，就可以看到效果了

修改调试：

1. 在运行完android项目
2. 我们摇一摇手机，点击Dev Settings后，点击Debug server host & port for device,
   设置IP和端口(本机地址)如：192.168.0.104:8081
3. 修改完js文件
4. 回到空白页面，再次摇一摇手机，选择Reload JS，程序就运行起来

tip: 在模拟器上模拟摇晃手机没有显示设置菜单，，， 但是在真机上就可以了

参考地址 http://www.jianshu.com/p/22aa14664cf9?open_source=weibo_search