react-native + androidstudio 混合开发 - 1（基础配置）

谢谢。最近好热，大家夏天快乐~早日成为技术大牛
希望一起学习，互相进步 ^ ^
老规矩，先上图

注意版本匹配问题package.json

"dependencies": {
    "install": "^0.10.1",
    "react": "^16.0.0-alpha.12",
    "react-native": "^0.46.1"
  }

之前一直load不出来好急，最后决定更新版本

终于搞定

前提:node环境git环境
（以window为例）

1：新建安卓工程

2：选择sdk版本 一定要 参考官方文档http://facebook.github.io/react-native/docs/getting-started.html
sdk - plateforms

sdk - tools

接下来点击next - >就好了

3：进入项目，修改bulid
compileSdkVersion 23
compile ‘com.android.support:appcompat-v7:23.0.1’

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "25.0.0"
    defaultConfig {
        applicationId "com.gmz.myreact"
        minSdkVersion 23
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

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:23.0.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    testCompile 'junit:junit:4.12'
}

4：andoridstudio 的Terminal终端 使用命令行导入react 和 react-native包

npm init

生成package.json文件

package.json文件是npm下载模块Module时会带有这个json文件 里面有当前模块的介绍。如版本信息，依赖的模块 以及运行Node命令的起始文件路径等等 

entrypoint最好先写成index.android.js，一会儿就不用配了

输完后按enter ，yes？提示时继续enter

继续npm命令导包
为了快速下载，配置淘宝镜像

npm config set registry “https://registry.npm.taobao.org”

开始安装

npm install --save react react-native

完成后会多一个node_modules包

node_modules 目录是一个Node模块 里面主要是js文件，我们使用js编写代码时引用的一些模块，组件主要是在这里面，比如reative,react-native 。

5：配置
①添加.flowconfig文件（可以不搞，flow是一种代码检查规范）
新建file，将https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig里的内容复制

②配置 package.json 信息
script 标签下添加start（执行语句）

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

③新建一个入口 index.android.js文件，复制点东西过去，就helloworld吧

index.android.js 文件是编写android项目的起始文件  

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

class HelloWorld extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}> 你好世界</Text>
        <Image style={styles.pic} source={{uri: 'http://192.168.10.124:8080/gmz.jpg'}}></Image>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  pic: {
        width:96,
        height:83,
  },
});
AppRegistry.registerComponent('HelloWorld', function() { return HelloWorld });

④gradle配置
依赖

ndk配置 ndk 、packagingOptions 、configurations.all（这个是为了解决react和google在debug代码时候的冲突）

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "25.0.0"
    defaultConfig {
        applicationId "com.gmz.myreact"
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    packagingOptions {
        exclude "lib/arm64-v8a"
    }
    configurations.all {
        resolutionStrategy.force'com.google.code.findbugs:jsr305:1.3.9'
    }
}

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:23.0.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile "com.facebook.react:react-native:0.46.1" //天node_modules下自己的
    testCompile 'junit:junit:4.12'
}

build successful 后就可以了

查看librarys里是否有react最新版本

6：添加基础代码

保证getMainComponentName与index.android.js里function返回值一致，es6好像可以 => 代替callback- function了

Mainactivity

package com.gmz.myreact;

import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;


public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button button = (Button) findViewById(R.id.bt);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this, MyReactActivity.class));
            }
        });
    }
}

MyReactActivity（记得在清单文件中配置）直接继承模板代码，很6~

package com.gmz.myreact;

import android.support.annotation.Nullable;

import com.facebook.react.ReactActivity;

/**
 * 作者：haoran   on https://github.com/woaigmz 2017/7/11.
 * 邮箱：[e-mail]
 * 说明：
 */

public class MyReactActivity extends ReactActivity {
    @Nullable
    @Override
    protected String getMainComponentName() {
        //这个在Registry.registerComponent注册
        return "HelloWorld";
    }
}

MyApplication （记得在清单文件中配置）

import android.app.Application;

import com.facebook.react.BuildConfig;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

import java.util.Arrays;
import java.util.List;

/**
 * 作者：haoran   on https://github.com/woaigmz 2017/7/11.
 * 邮箱：[e-mail]
 * 说明：
 */

public class MyAppliaction extends Application implements ReactApplication {

    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;
    }

}

添加DevSettingsActivity

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

7：另开一个 Termial 运行react-native start 编译js代码 启动服务

react-native start

这个提示说明服务已开启，可以测试一下
http://localhost:8081/index.android.bundle?platform=android
会很慢，请耐心等待
出现一下页面说明js编译成功，服务开启 –>

8：AS运行项目 – 真机调试
apk安装成功以后在原生的MainActivity点击按钮进入react界面。
会load一下js脚本（确保npm - start 或 react-native start ）
AS

真机

当报缺少
index.android.bundle时有2种解决方案
①打开Termial窗口 , 新建assets文件夹创建bundle文件，生成bundle文件（assets下），（assets目录存在执行下面命令才有效）

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/

哈哈~

②package.json里添加

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "bundle-android": "react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"
  }

重启服务，手机reload，进行调试
9：react界面会出现的异常
先挖坑，白屏（应用管理–权限管理–允许弹窗）
红屏 ( 使劲摇晃手机 )

点击DevSettings，更改静态ip与react服务一致

继续摇晃手机reload

出现bug提示，建议google，*，github