如何愉快地调试一个 React Native for Android APP
首先确保你的电脑和手机设备在同一个Wi-Fi环境下。其次你需要开启USB调试才能在你的设备上安装你的APP。一定要确定你已经打开设备的USB调试开关!确保你的设备已经被成功连接，可以输入adbdevices核实:在右边那列看到device说明你的设备已经被正确连接了。注意，你只应当连接仅仅一个设备。因为如果你连接了多个设备（包含模拟器在内），你后续的一些操作可能会失败。拔掉不需要的设备，或者关掉模拟器，确保adbdevices的输出只有一个是连接状态。现在我们可以运行react-nativerun-android来在设备上安装并启动我们的应用了这句命令执行后，实际上就是在本地起一个noderver，并且将你的androidproject编译打包，再上传到你的手机上。然后当js文件有改动或debug模式下手动选择reloadjs时候会自动更新bundle文件，达到改动js文件后即时显示的调试效果。这“红屏”又是什么鬼？别着急，是正常的，我们需要连接上开发服务器，下面的步骤会解决这个问题。摇晃手机，或者运行adbshellinputkeyevent82，可以调出开发者菜单。点击进入DevSettings点击Debugrverhostfordevice输入你电脑的IP地址和端口号（譬如我的是192.168.3.15:8081）注意：如果你的设备是android5.0以上版本(API21+)，就不用折腾这步了而是：运行adbrevertcp:8081tcp:8081（建立一个从设备向电脑转发的端口，前提是设备和电脑通过USB相连）不需要配置，你就可以使用ReloadJS和其它的开发选项了Chrome开发者工具在Chrome上调试js代码，需要在开发菜单中选择DebugJS，这会打开一个新的debugger-uitab页。在Chrome中，按下⌘+option+i或者选择视图(View)->开发者(Developer)->开发工具(DeveloperTools)来打开开发工具控制台。打开有异常时暂停（PauOnCaughtExceptions）选项，能够获得更好的开发体验。Chrome中并不能直接看到App的用户界面，而只能提供console的输出，以及在sources项中断点调试js脚本。要查看APP日志？在终端下运行adblogcat*:SReactNative:VReactNativeJS:V可以看到你的应用的日志。实时刷新这个选项可以在你的js代码变更了之后，自动触发所连设备或者模拟器自动刷新。开启方法：先打开开发菜单，选择DevSettings，然后选择AutoreloadonJSchange选项。到此才能完整的调试AndroidRN,繁琐到累绝不爱。。等等，能否想法简化一下过程？既然我们的RN项目里包含了完整的android工程，何不把android工程导入到androidstudio去运行？不但可以同时查看js的日志和native的日志，而且开发android的同学最熟悉AS，利用AS的快捷键和各类插件提升调试效率。haveatry,答案是肯定的！执行react-nativestart也可以起一个noderver，只是它不帮你安装APP到device。以上就是我踩坑后整理的方法，按这套组合拳就可以愉快地调试了。水平有限，抛砖引玉，如果你有更好的方法！欢迎拍砖！此处插播一个广告：拍砖请拍到我们的杏树林开放空间（246078103），期待感兴趣的同学加入。之后要解决的一些issue1，关于设备MinSdkVerisonRN只支持Android4.1.2（API16）以上设备，4.0根据网络数据大概占比0.7比例，随着大部分app已经不支持4.0以下设备了，这块倒还可以接受,目前我们的病历夹是3.0(API-11),口袋是4.0(API-14)2，我们的androidRN现在只能通过DebugJS才能渲染出界面，而不能正常的用ReloadJS3，在界面跳转时卡的令人发指
如何使用React Native Android 实现本地组件的安装
packager的启动可以执行 react-native start
可能遇到一些error【graldew wrapper 出错】，使用 gradlew installDebug/installRelea 直接执行
$ ./gradlew asmble -为所有构建类型创建apk
$ ./gradlew check 运行所有的检查，比如说Android Lint，如果发现问题可终止任务 $ ./gradlew build 运行以上两个任务
$ ./gradlew clean -清除生成的apk ++++
$ ./gradlew connectedCheck - 在设备上运行测试
$ ./gradlew deviceCheck - 远程设备运行测试
$ ./gradlew installDebug/installRelea - 在设备商安装指定版本
$ ./gradlew uninstall - 卸载
所有gradlew命令：
luoyuandeMacBook-Pro% gradlew tasks
:tasks
------------------------------------------------------------
All tasks runnable from root project
------------------------------------------------------------
Android tasks
-------------
androidDependencies - Displays the Android dependencies of the project.
signingReport - Displays the signing info for each variant.
sourceSets - Prints out all the source ts defined in this project.
Build tasks
-----------
asmble - Asmbles all variants of all applications and condary packages.
asmbleAndroidTest - Asmbles all the Test applications.
asmbleDebug - Asmbles all Debug builds.
asmbleRelea - Asmbles all Relea builds.
build - Asmbles and tests this project.
buildDependents - Asmbles and tests this project and all projects that depend on it.
buildNeeded - Asmbles and tests this project and all projects it depends on.
clean - Deletes the build directory.
compileDebugAndroidTestSources
compileDebugSources
compileDebugUnitTestSources
compileReleaSources
compileReleaUnitTestSources
mockableAndroidJar - Creates a version of android.jar that's suitable for unit tests.
Build Setup tasks
-----------------
init - Initializes a new Gradle build. [incubating]
wrapper - Generates Gradle wrapper files. [incubating]
Help tasks
----------
components - Displays the components produced by root project 'AliReactAndroid'. [incubating]
dependencies - Displays all dependencies declared in root project 'AliReactAndroid'.
dependencyInsight - Displays the insight into a specific dependency in root project 'AliReactAndroid'.
help - Displays a help message.
projects - Displays the sub-projects of root project 'AliReactAndroid'.
properties - Displays the properties of root project 'AliReactAndroid'.
tasks - Displays the tasks runnable from root project 'AliReactAndroid' (some of the displayed tasks may belong to subprojects).
Install tasks
-------------
installDebug - Installs the Debug build.
installDebugAndroidTest - Installs the android (on device) tests for the Debug build.
uninstallAll - Uninstall all applications.
uninstallDebug - Uninstalls the Debug build.
uninstallDebugAndroidTest - Uninstalls the android (on device) tests for the Debug build.
uninstallRelea - Uninstalls the Relea build.
Verification tasks
------------------
check - Runs all checks.
connectedAndroidTest - Installs and runs instrumentation tests for all flavors on connected devices.
connectedCheck - Runs all device checks on currently connected devices.
connectedDebugAndroidTest - Installs and runs the tests for debug on connected devices.
deviceAndroidTest - Installs and runs instrumentation tests using all Device Providers.
deviceCheck - Runs all device checks using Device Providers and Test Servers.
lint - Runs lint on all variants.
lintDebug - Runs lint on the Debug build.
lintRelea - Runs lint on the Relea build.
test - Run unit tests for all variants.
testDebugUnitTest - Run unit tests for the debug build.
testReleaUnitTest - Run unit tests for the relea build.
Other tasks
-----------
jarDebugClass
jarReleaClass
To e all tasks and more detail, run with --all.
Adding Android to an existing React Native project
If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:
Update the
react-native
dependency in your
package.json
file to
the latest version
$ npm install
$ react-native android
react native android dev tting怎么配置
一，设备与环境
1，一台 mac
2，安装软件包管理器 Homebrew(中文)
终端里输入/usr/bin/ruby -e "$(curl -fsSL https://raw.githuburcontent.com/Homebrew/install/master/install)"进行安装。
3，安装 wget 或者 curl
wget，终端里输入brew install wget进行安装。
curl，终端里输入brew install curl进行安装。
4，安装 nvm (node版本管理器)
如果安装了 wget，终端输入wget -qO- https://raw.githuburcontent.com/creationix/nvm/v0.31.0/install.sh | bash进行安装 nvm。
如果安装了 curl，终端输入curl -o- https://raw.githuburcontent.com/creationix/nvm/v0.31.0/install.sh | bashÂ进行安装 nvm。
5，Android SDK
这个不用多说了，相信大家都会的。顺便把 Android SDK 配置到环境变量。
如果你没有 Android SDK，也可以通过终端输入brew install android-sdk。
二，安装和初始react-native demo
终端输入npm install -g react-native-cli安装 react-native。
如果显示EACCES: permission denied，用超级权限再次执行一下上面的指令。反正我是没遇到。
进入到你要创建 demo 的目录，终端输入cd 你得文件路径.
终端输入react-native init AwesomeProject，初始 AwesomeProject 。
终端输入cd AwesomeProject。
终端输入react-native run-android可以直接运行 node 服务并编译运行 Android 项目，直至安装到手机。
如何把React Native嵌入到原生android应用中
创建一些react-native依赖的一些模块，在package.json文件的scripts属性中添加：
[javascript] view plain copy
"start": "node node_modules/react-native/local-cli/cli.js start"
注：如果scripts中存在其他键值对，则以逗号为分隔符。
在module的根目录创建index.android.js文件，并将一下内容下入index.android.js文件：
[javascript] view plain copy
'u strict';
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, World</Text>
</View>
)
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
在Android Studio中，在moudle的build.gradle文件中添加一下内容：
[javascript] view plain copy
allprojects {
repositories {
...
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
...
}
在AndroidManifest.xml文件中添加网络访问权限（仅在开发或调试中需要该权限）：
<us-permission
android:name="android.permission.INTERNET"
React Native开发android和ios客户端有什么优势和劣势
react-native
用react 进行原生app开发的框架，让广大开发者使用js和react开发应用，提倡组件化开发。
优点
提供一个个封装好的组件让开发者使用，也可以相关嵌套形成新的组件。
可以维护多种平台（Web，Android和IOS）的同一份逻辑核心代码来创建原生app。
和H5类似，跨平台、低成本开发、开发速度快、动态发布、一套类似代码维护三个平台。
缺点
组件不全，第三方组件也不全，遇到某些特殊功能，需要花大力气写；性能方面也无法媲美原生，还是有一些损耗，特别是交换大数据时；
IOS版本略好，androi发展较慢；
ios和android代码并非通用，有可能需要维护两套代码或者在代码中做一些判断；
开发人员还是需要会原生开发，不然自定义组件无法编码；
如何把React Native嵌入到原生android应用中
参考如下内容： 首先在Android中嵌入React Native： 每一个Android Studio project下包含多个module，所以，从命令行进入到module根目录，运行： [plain] view plain copy $ npm init $ npm install --save react-native $ curl -o .flowconfig 。可以看看安卓巴士的教程：http://www.apkbus.com/thread-462421-1-1.html
