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

文章图片

注意版本匹配问题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 ( 你好世界 ); } }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; /** * 作者：haoranon https://github.com/woaigmz 2017/7/11. * 邮箱：1549112908@qq.com * 说明： */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; /** * 作者：haoranon https://github.com/woaigmz 2017/7/11. * 邮箱：1549112908@qq.com * 说明： */public class MyAppliaction extends Application implements ReactApplication {private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; }@Override protected List getPackages() { return Arrays.asList(new MainReactPackage()); } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; }}

添加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
【react-native + androidstudio 混合开发 - 1（基础配置）】出现bug提示，建议google，stackoverflow，github

推荐阅读

• 

  中药怎么熬 教你正确熬中药四个小步骤
• 

  淘宝助理下架了用什么软件 客服办公必备软件
• 

  安卓手机看本地漫画,咪咕动漫拥有2万多部正版漫画漫画
• 

  公司授权代理进驻电商平台，公司如何授权代理
• 

  c语言函数语句分类 c语言中函数分类
• 

  pdf如何编辑页眉页脚 迅捷pdf编辑器修改PDF页眉页脚的图文操作步骤
• 

  车载低音炮音乐大全 流行时尚歌曲
• 

  秦始皇陵墓不挖的真正原因是什么 秦始皇陵墓不挖有何原因
• 

  怪物猎人世界冰原据点介绍 怪物猎人世界冰原据点有什么
• 

  2020年5月剖腹产好日子 2020年5月剖腹产好日子是什么
• 

  安卓小项目的源代码,google搜索源代码查看服务提供商
• 

  redis设置用户密码 redis设置密码后访问
• 

  PPT怎么做背景 ppt如何换背景
• 

  数据分析处理库pandas,Excel数据分析库
• 

  linuxredis4
• 

  华为m荣耀V40系列再次曝光，网友：有一种“缝合怪”的感觉！
• 

  莲雾多少钱一斤
• 

  好听撩人的女网名 好听撩人的女网名两个字
• 

  自动挡档位图解说明图片 自动挡档位图解说明
• 

  夜有所思|夜有所思 8.1

• SwiftUI|SwiftUI iOS 瀑布流组件之仿CollectionView不规则图文混合(教程含源码)
• 手写|手写 React-Native 方法调用式的 Modal 弹框、Toast 提示
• react-native中Text包含Image大小问题
• OpenGL|OpenGL 绘制甜甜圈深度测试、多边形偏移、裁剪、 混合
• 规范你的代码:AndroidStudio|规范你的代码:AndroidStudio 一键生成MVP模板代码
• React-Native开发工具|React-Native开发工具 -- Vs Code
• androidstudio最实用的20个快捷键
• 为什么混合云需要虚拟化（）
• gif和滤镜会碰撞出怎样的火花（写了一个可以混合gif和滤镜的库）
• 混合云应用双活容灾最佳实践