问题：react native初始化项目在安卓真机运行问题？
描述:我将好不容易init成功的项目，通过"react-native run-android"与"react-native start"指令部署到了小米2S安卓手机上，这时，弹出的界面事空白的。请问大家有什么解决方法吗？另外打开一个界面，输入react-native start。transforming停在393/394..。解决方案1:transforming停在393/394是代码有错误。最新的windows 0.18.0正式版，手机连上后，能看到错误在哪行哪列。你连不上，还是环境有问题。另外用小米2S调试？这个手机多少版本的操作系统？建议用Android 5.0以上的真机调试。解决方案2:应该报错了，但是弹窗被拦截了，你试试在安全工具找下权限设置，如果程序有错会有错误信息的adb reverse tcp:8081 tcp:8081 反向代理了么？解决方案3:白屏的问题解决了，在此表述下解决方案供后人参考。在MIUI系统里，选择 “设置/其他应用管理”找到你发布到手机上的RN app。选择“权限管理”勾选“显示悬浮框”（默认不勾选）这个时候一般会看到红屏报错，然后具体问题具体分析的去解决就行了。目测rn的报错是种悬浮框被默认本系统拦截了。最后，谢谢关注本问题的各位网友。
以上介绍了“react native初始化项目在安卓真机运行问题？”的问题解答，希望对有需要的网友有所帮助。
本文网址链接：/itwd/1191512.html
上一篇： 下一篇：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 打离线包 真机调试 - 简书
React-Native 打离线包 真机调试
0x01 打bundle命令 （iOS Android 通用）
--entry-file Path to the root JS file, either absolute or relative to JS root [required
--platform Either "ios" or "android"
--transformer Specify a custom transformer to be used (absolute path) [default: "/Users/babytree-mbp13/projects/xcodeProjects/AwesomeProject/node_modules/react-native/packager/transformer.js"]
--dev If false, warnings are disabled and the bundle is minified [default: true]
--prepack If true, the output bundle will use the Prepack format. [default: false]
--bridge-config File name of a a JSON export of __fbBatchedBridgeConfig. Used by Prepack. Ex. ./bridgeconfig.json
--bundle-output File name where to store the resulting bundle, ex. /tmp/groups.bundle [required]
--bundle-encoding Encoding the bundle should be written in ([default: "utf8"]
--sourcemap-output File name where to store the sourcemap file for resulting bundle, ex. /tmp/groups.map
--assets-dest Directory name where to store assets referenced in the bundle
--verbose Enables logging [default: false]
0x02 Android 打包步骤 打包步骤1.在工程根目录下执行打包命令，比如react-native bundle --entry-file index.android.js --bundle-output ./android/app/src/main/assets/index.android.jsbundle --platform android --assets-dest ./android/app/src/main/res/ --dev false注意:[./android/app/src/main/assets/]文件夹存在。2.增量升级的话不要把图片资源直接打包到res中，脚本如下：react-native bundle --entry-file index.android.js --bundle-output ./bundle/androidBundle/index.android.jsbundle --platform android --assets-dest ./bundle/androidBundle/ --dev false3.保证MainActivity.java中的setBundleAssetName与你的jsbundle文件名一致，比如.setBundleAssetName(“index.android.jsbundle”)就与我生成的资源名一致0x03 iOS 打包步骤1.在工程根目录下执行打包命令，比如react-native bundle –entry-file index.ios.js –bundle-output ./bundle/iosBundle/index.ios.jsbundle –platform ios –assets-dest ./bundle/iosBundle –dev false注意要先保证bundle文件夹存在。2.在xcode中添加assets【必须用Create folder references的方式，添加完是蓝色文件夹图标】和index.ios.jsbundle3.参考官方文档，修改RN页面入口代码 jsCodeLocation = [[NSBundle mainBundle] URLForResource:@”index.ios”
withExtension:@”jsbundle”];0x04 QAios打包遇到的问题1.离线包如果开启了chrome调试，会访问调试服务器，而且会一直loading出不来。2.如果bundle的名字是main.jsbundle,app会一直读取旧的,改名就好了。。。非常奇葩的问题，我重新删了app，clean工程都没用，就是不能用main.jsbundle这个名字。3.必须用Create folder references【蓝色文件夹图标】的方式引入图片的assets，否则引用不到图片4.执行bundle命令之前，要保证相关的文件夹都存在
自学-iOS初级开发菜鸟ReactNative踩坑之配置调试端口的解决方法
作者：Conan_Lee
字体：[ ] 类型：转载 时间：
本篇文章主要介绍了ReactNative踩坑之配置调试端口的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文介绍了ReactNative踩坑之配置调试端口的解决方法，分享大家，顺便也给自己留个笔记
问题是这样的,由于公司的机器安装了安全软件，http://localhost:8081被占用了。(windows上配置环境真不易，最后一步还是被公司环境坑了)
所以导致按照教程配置完环境最后到真机上还是刷不出来界面
那么我们就这么放弃了吗？当然不，不然就白忙活了
分析问题：端口被占用，那我们换一个端口不就行啦，于是乎各种查阅资料，发现PackageManager（包管理服务）在启动的时候是可以配置端口的.如下命令
react-native start --port 18081
这样Launch起来的包管理服务就在端口18081上了，在Chrome上敲localhost:18081神奇的显示了ReactNative的相关界面，说明正常了。
接着在真机上需要敲这个命令
adb reverse tcp:18081 tcp:18081
这个命令会将手机的调试端口设置成与包管理服务一致的端口18081
然后我在真机上跑了一遍程序，结果还是显示不出来。莫名的伤感有没有
在各种找不到资料的情况下，开始翻看ReactAndroid源码，经过分析最后找到这么一段关键的代码
public String getDebugServerHost() {
// Check host setting first. If empty try to detect emulator type and use default
// hostname for those
String hostFromSettings = mPreferences.getString(PREFS_DEBUG_SERVER_HOST_KEY, null);
if (!TextUtils.isEmpty(hostFromSettings)) {
return Assertions.assertNotNull(hostFromSettings);
String host = AndroidInfoHelpers.getServerHost();
if (host.equals(AndroidInfoHelpers.DEVICE_LOCALHOST)) {
"You seem to be running on device. Run 'adb reverse tcp:8081 tcp:8081' " +
"to forward the debug server's port to the device.");
好家伙，原来是从SharedPreference中先读了PREFS_DEBUG_SERVER_HOST_KEY这个值，如果为空则用AndroidInfoHelpers.getServerHost()这个函数返回值(也就是loacalhost:8081)
那么解决办法就浮出水面了，只需要在Application初始化的时候讲这个值设置成我们自定义的就好了，类似
SharedPreferences mPreferences = PreferenceManager.getDefaultSharedPreferences(applicationContext);
mPreferences.put("debug_http_host", "localhost:18081");
这段代码最好写在SoLoader.init(this, /* native exopackage */ false);调用之前，因为在windows上remote debug js的时候如果不写在前面似乎调试不起效果(调试的地址端口也变成了18081了)
写在最后的话，在找不到资料解决问题的时候，可以开始撸起袖子看代码了！！！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具React Native真机调试 - CSDN博客
React Native真机调试
iOS 真机调试
首先，你要让调试用电脑和你的手机必须处于相同的 WiFi 网络中下
打开 iOS 项目的&AppDelegate.m&文件
更改&jsCodeLocation&中的&localhost&改成你电脑的局域网IP地址
在&Xcode&中，选择你的手机作为目标设备，Run&即可
可以通过晃动设备来打开开发菜单(重载、调试等)
Android 真机调试
在 Android 设备上打开&USB debugging&并连接上电脑启动调试。
在真机上运行的方法与在模拟器上运行一致，都是通过&react-native run-android&来安装并且运行你的 React Native 应用。
如果不是 Android 5.0+ (API 21) ，那么就没办法通过&adb reverse&进行调试，需要通过 WiFi 来连接上你的开发者服务器
让调试用电脑和你的手机必须处于相同的 WiFi 网络中下
打开震动菜单 (摇动设备)
前往&Dev Settings
选择&Debug server host for device
输入调试用电脑的局域网IP 后面加上 :8081 才可以正常运行否则还是出错
点击&Reload JS
Xcode7上运行报错解决方法
在 Xcode7 指定真机运行，结果报出如下错误：
Undefined&symbols&for&architecture&arm64:&&&&_RCTSetLogFunction&,&referenced&from:&&&&&&&-[PropertyFinderTests&testRendersWelcomeScreen]&in&PropertyFinderTests.o&ld:&symbol(s)&not&found&for&architecture&arm64&clang:&error:&linker&command&failed&with&exit&code&1&(use&-v&to&see&invocation)
一开始以为的 React Native 库的问题，查找了一下资料，研究了一下，原来在&Build Setting&中设置&Dead Code Stripping为&No&（如下图）就可以解决了
本文已收录于以下专栏：
相关文章推荐
在设备上运行
在GitHub上修改这篇文档支持我们
前提条件：USB调试
你需要开启USB调试才能在你的设备上安装你的APP。首先，确定你已经打开设备的USB调试开关
确保你的设备已经成功连接。...
前提：1、use开关打开
2、运行React Native react-native start 或者 react-native run-android真机调试：Android 5.0及以上使用ad...
在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Na...
最近做了一个项目，用的react-native 开发的iso项目。
由于自己没有oc基础，所以该项目几乎全用js写得。（顺便说一下，react-native 开发，最好还是学一下原生，起码的看得懂，不...
这是官方提供的离线包安装，也就是真机运行
转自：http://my.oschina.net/imot/blog/512808
如有侵犯，请来信
最近在尝试使用 React Native 做一些东西，...
1，看看是不是有新添加的文件跟之前文件同名
2，错误信息中出现了某个类的名字，去原文件中看看#import了哪些第三方库，把这些库挨个注释排除，找到出错的那个库，然后按照官方提供的步骤重新添加一...
React Native之真机调试与离线包方式——iOS开发（一）前言这篇文章讲解以下关于React Native中iOS开发的常见调试方式以及离线包开发方式。做过iOS开发的同学都知道，iOS开发真...
上周五才开始学习的React-Native开发，之前略有一些React的开发经验，但对原生Native的开发一窍不通。
好，背景交代完毕，讲讲我的初学经历和遇到的坑以及一些心得体会。
作为对APP开发...
为什么在真机上运行react-native应用时打开的应用是白屏？测试环境：MIUI7安装应用：MyProject首先，打开手机设置应用，点击进入设置界面。接下来，在设置应用中，选择“其他应用管理”选...
他的最新文章
讲师：宋宝华
讲师：何宇健
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}