运行react-native中的android项目及问题解决
在命令行终端执行react-native init 项目名 命令后，创建RN项目，在RN项目中运行android的工程有两种方式：
第一种方式，使用webstorm打开RN项目,在webstorm工具的terminal终端中输入react-native run-android命令，webstorm会把android应用运行到设备或模拟器上
打开应用你可能会发现报错：&红屏&Could not get BatchedBridge, make sure your bundle is packaged correctly&
解决方案：打开设备悬浮窗，不同设备打开方式可能不一样，简单写两种设备的打开方式，一种是点击手机左下角菜单按钮打开悬浮窗，一种是要到手机的应用程序中去查找，之后可以在打开的程序中通过摇一摇手机打开悬浮窗。
打开悬浮窗之后，点击Dev Setting之后选择Debug serer host在弹出框中输入开启服务的ip和端口号（默认是8081）保存，回到程序页面再次打开悬浮窗点击reload即可成功运行程序。
第二种方式，通过android studio打开RN中的android项目并运行。
通过第二种方式打开android项目并运行不会自动的开启react-native服务，需要我们手动的去开启，如果react-native服务没有开启会报如下错误：Could not connect to development server.
出现这个问题我们需要手动的去开启服务，使用终端命令行工具cd进入到项目的根目录中，执行react-native start
再次通过android studio运行android项目到设备上，有可能会出现&Could not get BatchedBridge, make sure your bundle is packaged correctly&这个错误通过上面提到的方法进行解决，即可成功运行程序。
如果还是报Could not get BatchedBridge, make sure your bundle is packaged correctly这个错误可以尝试使用下面的方案进行解决，首先在RN项目的android-&app-&src-&main目录下创建一个名为assets空文件夹，之后使用终端命令行进入到RN项目的根目录，执行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
命令，之后重启react-native服务，并重新运行android项目。
以上就是在RN项目中运行android工程的两种方式，在运行项目的过程中可能还会出现各种问题，在这里由于篇幅的原因就不一一列举了，会再开一篇记录在学习RN时遇到的各种问题及解决方案。
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？React Native实战（一）：配置和起步
发表于 15:40|
作者廖祜秋
摘要：MDCC 2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
10月14日-16日，由CSDN和创新工场联合主办的将在北京新云南皇冠假日酒店隆重召开，现在抢注大会门票，即享多重好礼！
Facebook开源React Native也势要统一移动端编程语言，而其提前发布React Native for Android更是引得国内外开发者一众热捧。MDCC
2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React
Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
图：阿里巴巴工程师 廖祜秋
以下为正文：
2015 年 9 月 15 号，React Native for Android 发布。至此，React 基本完成了对多端的支持。基于 React
/ React Native 可以：
HTML5、Android、iOS 多端代码复用；
实时热部署。
在接下来的时间，我会通过一系列文章来介绍 React Native。本文介绍环境配置以及如何建立一个简单的项目。（注：本篇文章 iOS 和
Android 开发都适用。）
目前使用 React Native 开发只能在 Mac 系统 上进行。写 iOS 的同学，应该都是 Mac （除了听说网易有些部门写 iOS
给黑苹果之外，哈哈哈哈）。 开发 Android 的同学, 如果公司配发的不是 Mac 的话，建议自己入手一个，能显著提高生产力，就当投资自己吧。我大阿里对
Android 开发也是不给 Mac 的（不知道公司什么思路，现在倒是可以申请 Mac air了，air的性能……），所以我也是自己买的。
需要安装的有：
Homebrew 是 Mac 中的一个包管理器。没有安装的话，点击
安装，我的版本如下：
mac-2:~ srain$ brew -v
Homebrew 0.9.5 (git revision ac9a7; last commit )
版本过低将会导致无法安装后续几个组件。可用 brew update 升级。
Node.js 需要 4.0 及其以上版本。安装好之后，npm 也有了。
安装 Node.js
nvm 是 Node.js 的版本管理器，可以轻松安装各个版本的 Node.js 版本。
安装 nvm 可以通过 Homebrew 安装：
brew install nvm
的方法安装。
然后安装 Node.js：
nvm install node && nvm alias default node
也可以直接下载安装 Node.js：
安装好之后，如下：
mac-2:react-native srain$ node -v
mac-2:react-native srain$ npm -v
这两个包分别是监控文件变化和类型检查的。安装如下：
brew install watchman
brew install flow
安装 React-Native
安装即可：
npm install -g react-native-cli
App开发环境的设置
XCode 6.3 及其以上即可。
这个比较麻烦。
设置环境变量：ANDROID_HOME
export ANDROID_HOME=/usr/local/opt/android-sdk
SDK Manager 安装以下包：
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
初始化一个项目
文档提到：
react-native init AwesomeProject
初始化一个项目，其中 AwesomeProject 是项目名字，这个随意。等待一段时间之后（具体视网络情况而定），项目初始化完成。
进入到项目目录：
cd AwesomeProject
mac-2:AwesomeProject srain$ ls -l
drwxr-xr-x
476 Sep 21 09:52 android
-rw-r--r--
1023 Sep 21 11:47 index.android.js
-rw-r--r--
1065 Sep 20 11:58 index.ios.js
drwxr-xr-x
204 Sep 20 11:58 ios
drwxr-xr-x
170 Sep 21 10:31 node_modules
-rw-r--r--
209 Sep 20 11:58 package.json
其中 android 和 ios 中分别为两个平台的项目文件。index.android.js 和 index.ios.js 为两个页面对应的
不管是 iOS 还是 Android，在开发调试阶段，都需要在 Mac 上启动一个 HTTP 服务，称为“Debug Server”，默认运行在
8081 端口，APP 通 Debug Server 加载 js。
iOS 和 Android 的模拟器，连接 Mac 本机的服务都很方便。但是通过 USB 或者 WiFi 连接调试，就稍微麻烦一些了。
还是非常简单，XCode 打开项目，点击运行就好。修改 index.ios.js, 在模拟器中 ? + R 重新载入 js 即可看到相应的变化。
iOS 真机调试也简单，修改HTTP地址即可。
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
按照官方文档，需要一个模拟器（Genymotion模拟器也可以）。但是不像 iOS，Android 开发平时更多是直接用真机进行开发和调试，如何运行部署到真机，下面会提到。
运行命令：
react-native run-android
然后就会部署到模拟器，修改 index.android.js ，调出模拟器菜单键，选择重新载入 js 即可看到变化。
Android 真机调试
示例 App 直接部署到真机，红色界面报错，无法连接到 Debug Server。
如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。
adb reverse tcp:8081 tcp:8081
如果 5.0 以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting & Debug Server host
for device，然后填入 Mac 的 IP 地址（ifconfig 命令可查看本机 IP）
关于修改 DevHelper 来进行和 iOS 一样的开发调试，后续关于热部署时，我会介绍到。
在 Android Studio 中调试开发
我们可能希望在 Android Studio 打开项目，然后编译部署到真机。
这个时候，在命令行启动 Debug Server 即可：
react-native start
结论和后续
本篇文章，iOS 和 Android 都适用。至此，环境配置和示例项目运行应该都好了。后续我会继续发几篇文章介绍：
重点介绍 Android 相关的开发：包括组件，源码分析等；
动态热部署；
多端代码复用。
官方文档：
时间仓促，水平有限，如有谬误，还请纠正，原始文档在。
将于10月14日-16日在北京新云南皇冠假日酒店召开。大会特设九大技术专场：平台与技术（iOS）、平台与技术（Android）、平台与技术（跨平台）、产品与设计、游戏开发、企业移动化、虚拟现实专场、硬件开发与技术、嵌入式开发。大会将聚集国内最具实力的产品技术团队，与开发者一道进行最前沿的探讨与交流。&
第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章React Native 你该了解的 Hello World
我的图书馆
React Native 你该了解的 Hello World
2013 年 Facebook 开源了 React 框架，去年上半年开源了基于 React 的 React Native 框架 iOS 部分，下半年开源了 Android 部分。目前国内 QQ、天猫、携程、QZone 等都有部分功能用 React Native 开发。注：以下部分 React Native 以简称 RN 代替，Node 及 Node.js 均表示 Node.js。限于篇幅，RN 的原理、 RN 与 Native 以及 Hybird 的优劣对比、RN 的页面跳转及 Flexbox 等后面再分享，今天只介绍 RN 的基础开发，让大家能初步了解 RN 开发。1. 介绍React&的 GitHub 介绍是：A declarative, efficient, and flexible JavaScript library for building user interfaces.简单的说 React 就是一个 JS 库，一个可用于编写 UI 的库。React Native&的 GitHub 介绍是：A framework for building native apps with React.React Native 基于 React，可用来开发 iOS 和 Android 原生应用。2. React Hello World上面是 React 示例，是一个简单的 html 文件，其结果是显示 Hello CodeKK。内容主要分为三部分：第一部分引入 React JS 文件，跟一般的 JS 文件引入无异。第二部分是定义一个 HelloMessage 的组件，组件的渲染函数 render 输出一个 div，div 内容接受一个名为 name 的变量。第三部分是 ReactDOM 将 HelloMessage 组件渲染到 example 这个 DOM 节点(body 内部的 div)中。上面的第二、三部分是 JSX 语法，这是 Facebook 对 ECMAScript 的扩展，即 JavaScript 语法扩展，基于 XML 样式。非必须，React 也可以直接调用原生 JS。JSX 语法可以让前端代码可读性更高，同时像 Java Web 的 Velocity 以及 Node 的 Jade 一样支持数据绑定。通过 React 我们可以让 UI 代码基于组件化开发，可以更好的组合、复用，更方便进行测试和维护。同时 React 通过 Virtual DOM 提高性能，不直接操作 Real DOM，达到快速渲染的效果。3. 新建 React Native Hello World在完成必要软件安装后，命令行运行react-native init AwesomeProject新建工程，其中 AwesomeProject 为工程名，在工程目录下运行react-native run-android或者react-native run-ios分别打包为 Android 或 iOS 应用，编译部署到相应模拟器上运行。4. React Native Hello World 工程简介4.1 RN 工程目录(1) android/ios 文件夹用于存放 Android/iOS 平台需要单独适配的代码。拿 Android 为例，android 文件夹内部目录结构跟我们一般的 Android 工程一样。(2) index.android.js 和 index.ios.js 文件分别为 Android 和 iOS 的启动入口，可以简单理解为 Java 的 Main 或者 Android 的 LAUNCHER & Main Activity。React Native 可以通过将 .android 及 .ios 放在文件后缀前面作为 Android 及 iOS 的单独适配文件。如现在需要用到名为 codekk 的图片，图片目录中有 codekk.png 和 codekk.android.png 两个文件，则 iOS 平台会打包 codekk.png，而 Android 平台会打包 codekk.android.png 文件。(3) package.json跟 Node 工程类似，用于描述项目的基本信息以及需要的依赖信息，比如默认依赖 React 和 React Native。RN 也是通过 Node.js 的 npm 做依赖管理。(4) node_modules 文件夹自动生成的文件夹，存放 package.json 中配置的依赖的源码以及 bin。(5) 其他配置文件.watchmanconfig 为 watchman 的配置文件，watchman 用于监控文件变化，辅助实现工程修改所见即所得。.flowconfig 为 flow 的配置文件，flow 用于代码静态检查。.buckconfig 为 buck 的配置文件，buck 是 Facebook 开源的高效编译系统，对 Android iOS 同时适用，通过复用未修改的代码单元、增量编译等提高编译效率。4.2 index.android.js 内容index.android.js 和 index.ios.js 文件内容默认一样，如下：这是一个 js 文件，通过react-native run-android命令运行后，其在 Android 模拟器中运行结果为：居中显示 Welcome to React Native!。文件内容主要分为三部分：(1) 引入需要的组件比如需要 react 中的 Component，需要 react-native 中的 View，跟 Java 以及 C++ 开发类似。(2) 定义新的组件继承 Component 定义新的组件，组件的 render 函数返回一个 View，View 内包含一个 Text 控件。styles 为样式，跟 CSS 类似。(3) 注册组件AppRegistry 是运行 RN Apps 的 JS 切入点，App 的根组件需要通过 AppRegistry.registerComponent 注册。5. React Native 调试(1) 即时运行通过&Debug 菜单开启 Enable Hot Reloading 以及 Atom 编辑器的自动保存，可以达到修改代码后自动部署到模拟器的效果。Live Reload 与 Hot Reloading 类似，只是 Live Reload 之后会重新进入 App 首页，而 Hot 可以在当前页面直接刷新。如果修改了 android 及 ios 文件夹下的内容或者添加新的图片等无法 Hot Reloading，需要重新运行。(2) &打日志通过代码中添加console.log('response from codekk is :' + response);console.error('error is :' + error);打印日志。console. 等表示其他级别日志。iOS 日志会打印在 Xcode 中。Android 需要通过 adb logcat *:S ReactNative:V ReactNativeJS:V 命令在 Terminal 输出日志。(3) &远程调试可以跟 JS 或 Node.js 一样在 Chrome Developer Tools 中调试 React Native，在上面 Debug 菜单中选中 Debug JS Remotely，默认会打开 http://localhost:8081/debugger-ui 调试页面，如下图：6. React Native 基础组件React Native 基础通用组件包括 Text、Image、TextInput、ListView、View、WebView、Switch、Slider、ScrollView、MapView 等。还有只适用于 Android 平台的 DrawerLayoutAndroid、ProgressBarAndroid、ToolBarAndroid 等。只适用于 iOS 平台的 ProgressViewIOS、SegmentedControlIOS 等。下面简单以 Image、ListView 为例进行介绍1. Image 组件表示显示本地图片 codekk.png。可以通过文件名后缀前加 @2x 和 @3x 表示不同分辨率图片，如 codekk@2x.png、codekk@3x.png。也可以直接显示网络图片。2. ListView 组件在 render 渲染函数中调用 ListView 控件，有两个主要的属性 dataSource 和 renderRow。dataSource 表示数据源，为一个数组，在组件构造函数中初始化。renderRow 表示渲染每行时会调用的函数，入参是 dataSource 中的一个数据，类似 Android 的 getView。ListView 同样支持分割线、Header 及固定的分块 Header、Footer、滚动监听、到达底部监听等特性。7. React Native 网络RN 支持 Fetch、WebSocket、XMLHttpRequest 三种请求方式，其中 Fetch 方式更为常用，以 Fetch 为例：表示网络获取 /op/page/1 的数据，并转换为 JSON，然后输出。8. Android、iOS 代码共用在 4.1 RN 工程目录 的介绍中，我们可以看到分别有 index.android.js 和 index.ios.js 文件，我们看下怎么让 Android 和 iOS 实现简单的代码复用。将 index.android.js 和 index.ios.js 文件全部改为如下内容：即让 Android 和 iOS 都调用 index.js，在 index.js 中实现相同启动逻辑。index.js 内容如下：在 android、ios 文件夹同级目录下新建 js 目录存放共用代码。这样 index.js 中示例除 ViewPagerAndroidDemo 和 DrawerLayoutDemo 只在 Android 下运行有效果外，其他 Demo 都可以原封不动运行在 iOS 中。上面所有代码都在 /trinea/react-native-demo 中。
TA的最新馆藏
喜欢该文的人也喜欢Linux React-Native Android开发环境搭建 -
- ITeye博客
博客分类：
参考：/project/react-native/GettingStarted.html1. 安装nvm参考：/creationix/nvm#installationwget -qO- /creationix/nvm/v0.29.0/install.sh | bash测试nvm命令: nvm -version2. 安装linuxbrew,参考：http://brew.sh/linuxbrew/git clone /Homebrew/linuxbrew.git ~/.linuxbrewAdd to your .bashrc or .zshrc:export PATH="$HOME/.linuxbrew/bin:$PATH"export MANPATH="$HOME/.linuxbrew/share/man:$MANPATH"export INFOPATH="$HOME/.linuxbrew/share/info:$INFOPATH"brew基本操作：% brew search &pkg&
# 搜索包% brew install &pkg&
# 安装包% brew uninstall &pkg& # 删除包% brew list &pkg&
# 列出 pkg 的文件% brew info &pkg&
# 关于 pkg 的信息% brew update
# 更新包% brew upgrade &pkg&
# 升级包3. 安装nvm install node && nvm alias default node这里要等 一段时间，下载会有点慢;4. 安装watchman和flow
$ brew install watchman
$ brew install flowpywatchman/bser.c:31:20: fatal error: Python.h: No such file or directory #include &Python.h&
^compilation terminated.error: command '/usr/bin/gcc-4.8' failed with exit status 1make[1]: *** [py-build] Error 1make[1]: *** Waiting for unfinished jobs....make[1]: Leaving directory `/tmp/watchman85-1hs3pkk/watchman-3.9.0'make: *** [all] Error 2READ THIS: /Homebrew/linuxbrew/blob/master/share/doc/homebrew/Troubleshooting.md#一看就是没装python,安装python
sudo apt-get installpython-dev装flow又报错了，又是缺少东西; 到http://flowtype.org/网站看看这个flow是什么东西（需要饭枪）Flow is a static type checker, designed to find type errors in JavaScript programs:/facebook/flow， 原来是 依懒ocaml libbelf-dev。执行下面操作:sudo apt-get install ocaml libelf-devhttp://flowtype.org/docs/getting-started.htmlmv hh_shared.o hack/heap/hh_shared.oocamlopt
-ccopt -DNO_LZ4 -c hack/hhi/hhi_elf.c+ ocamlopt
-ccopt -DNO_LZ4 -c hack/hhi/hhi_elf.chack/hhi/hhi_elf.c:26:18: fatal error: gelf.h: No such file or directory #include &gelf.h&
^compilation terminated.Command exited with code 2.make: *** [build-flow-native-deps] Error 10READ THIS: /Homebrew/linuxbrew/blob/master/share/doc/homebrew/Troubleshooting.md#troubleshooting5. 运行demo首先切换到你想要的目录下，依次执行以下命令
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/运行项目
$ react-native run-androidwv@wv-ThinkPad-SL ~/code $ react-native init react_native_android_testThis will walk you through creating a new React Native project in /home/wv/code/react_native_android_testInstalling react-native package from npm...^[^[Setting up new React Native app in /home/wv/code/react_native_android_testTo run your app on iOS:
Open /home/wv/code/react_native_android_test/ios/react_native_android_test.xcodeproj in Xcode
Hit Run buttonTo run your app on Android:
Have an Android emulator running, or a device connected
cd /home/wv/code/react_native_android_test
react-native run-android如果你react-natve run-android之后看到一个红色列表，就是因为没有启动server, React-native会在电脑上启动一个server,你在手机上跑的应用就是一个客户端，启动server如下：在命令行启动 Debug Server 即可：在工程目录下react-native start还有就是要配置一下电脑的IP，你的电脑必须我你的手机在一个局域网里面。按Menu键(或者摇一摇)出现菜单，选择Dev sttings -& Debug server host for device 填写你电脑的IP再重新选择reload JS看看。index.android.js改一行代码看看：var react_native_android_test = React.createClass({
render: function() {
&View style={styles.container}&
&Text style={styles.welcome}&
Welcome to React Native!
我的第一个应用
&Text style={styles.instructions}&
To get started, edit index.android.js
&Text style={styles.instructions}&
Shake or press menu button for dev menu
}});浏览器React Developer ToolsChrom: /webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/relatedFireFox: https://addons.mozilla.org/en-US/firefox/addon/react-devtools/React_Server启动报错：React packager ready. ERROR
A non-recoverable condition has triggered.
Watchman needs your help!The triggering condition was at timestamp=: inotify-add-watch(/home/wv/work/qianmi/d2papp/node_modules/bufferutil/build/Release/.deps/Release) -& The user limit on the total number of inotify increase the fs.inotify.max_user_watches sysctlAll requests will continue to fail with this message until you resolvethe underlying problem.
You will find more information on fixing this athttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch{"watchmanResponse":{"version":"3.9.0","error":"A non-recoverable condition has triggered.
Watchman needs your help!\nThe triggering condition was at timestamp=: inotify-add-watch(/home/wv/work/qianmi/d2papp/node_modules/bufferutil/build/Release/.deps/Release) -& The user limit on the total number of inotify increase the fs.inotify.max_user_watches sysctl\nAll requests will continue to fail with this message until you resolve\nthe underlying problem.
You will find more information on fixing this at\nhttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch\n"}}Error: A non-recoverable condition has triggered.
Watchman needs your help!The triggering condition was at timestamp=: inotify-add-watch(/home/wv/work/qianmi/d2papp/node_modules/bufferutil/build/Release/.deps/Release) -& The user limit on the total number of inotify increase the fs.inotify.max_user_watches sysctlAll requests will continue to fail with this message until you resolvethe underlying problem.
You will find more information on fixing this athttps://facebook.github.io/watchman/docs/troubleshooting.html#poison-inotify-add-watch
at ChildProcess.&anonymous& (/home/wv/code/react_native_android_test/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:202:17)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:818:16)
at Socket.&anonymous& (internal/child_process.js:319:11)
at emitOne (events.js:77:13)
at Socket.emit (events.js:169:7)
at Pipe._onclose (net.js:469:12)See http://facebook.github.io/react-native/docs/troubleshooting.htmlfor common problems and solutions.主要问题：The user limit on the total number of inotify increase the fs.inotify.max_user_watches sysctlGoogle: /guard/listen/wiki/Increasing-the-amount-of-inotify-watchers 解决$ cat /proc/sys/fs/inotify/max_user_watches8192$ sudo sysctl fs.inotify.max_user_watches=524288[sudo] password for wv: fs.inotify.max_user_watches = 524288$ sudo sysctl -p$ cat /proc/sys/fs/inotify/max_user_watches524288永久修改：$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conffs.inotify.max_user_watches=524288$ sudo sysctl -pfs.inotify.max_user_watches = 524288watchman shutdown-serverbrew updatebrew reinstall watchman上面重装应该不是必需的，要关闭命令行重新打开，再进入工程目录 下react-native start
浏览: 371244 次
来自: 南京
楼主写的非常详细,有点小复杂,建议用 pageoffice 插 ...
根本没效果
感谢楼主，解决了我的问题android:layerType=& ...
感谢楼主分析, 带走了
谢谢博主,问题解决了}