如何配置react native安卓调试真机调试

xiaominghimi 的BLOG
用户名:xiaominghimi
文章数:190
评论数:227
访问量:1124071
注册日期:
阅读量:5863
阅读量:12276
阅读量:418256
阅读量:1106283
51CTO推荐博文
本站文章均为&&原创,转载务必在明显处注明:&转载自【黑米GameDev街区】 原文链接:&Himi最近在真机运行遇到 &Command /bin/sh failed with exit code 1 &的错误, 模拟器运行没有任何问题。此问题已解决,这里分享下解决方案。先来看下错误日志,如下图:主要是划线的部分:1.PhaseScriptExecution Bundle\ React\ Native\ code\ and\ images ……2.&Command /bin/sh failed with exit code 1解决方法:1. 选中项目 -& TARGETS-&Build Phases-& “Bundle React Native code and images”2.勾选 “Run script only when installing” ,如下图:3.Clean 项目,重新运行即可。本文出自 “” 博客,请务必保留此出处
了这篇文章
类别:┆阅读(0)┆评论(0)在ubuntu上进行React-Native开发之环境搭建
10步从零完成React Native的环境搭建。
在ubuntu上进行React-Native开发。
1.开发环境的搭建
Node.js是一个基于Google V8引擎(Chrome javascript运行时)建立的平台
用于方便地搭建响应速度快,易于拓展的网络应用
NVM是nodejs版本管理工具.可以在多个nodejs版本中进行切换,降低了升级nodejs时的成本
NPM是nodejs软件包管理工具,可以方便的安装node相关的外部库
1.安装node
从https://nodejs.org/en/download/ 下载LTS版本的Source Code的tar.gz包
按照/nodejs/node#build
所示安装好相关依赖,并编译安装node
node -v 显示当前node的版本
npm& -v 显示当前npm的版本
git clone /creationix/nvm.git
clone完成后,进入目录直接执行./install.sh
安装完成后输入nvm如果没有提示,就执行source ./nvm.sh
查看NVM版本 nvm --version
查看NVM帮助 nvm -h
通过nvm ls查看当期已经安装的node或者iojs版本
通过nvm ls-remote查看当前可以安装的node或者iojs版本
通过nvm install v0.21.7安装指定版本的nodejs
通过nvm uninstall v0.21.7安装指定版本的nodejs
通过nvm use v0.21.7切换使用的nodejs版本
3.安装watchman
先安装依赖
sudo apt-get install autoconf& automake python-dev python3-dev
顺利完成依赖环境后,
git clone /facebook/watchman.git
cd watchman
git checkout v4.3.0& # the latest stable release 选择最新的版本
./autogen.sh
./configure
sudo make install
安装还是比较顺利的
4.安装flow
按照http://flowtype.org/docs/getting-started.html 所示即可完成flow的安装
flow version 会显示flow的版本,
例如 Flow, a static type checker for JavaScript, version 0.21.0
5.安装react-native
npm install -g react-native-cli
过程会比较长,而且要保证网络通畅(科学上网)
6.创建react-native项目(项目名为Demo)
react-native init Demo
过程会耗时较长(看电脑性能和网络通畅)
7.运行项目
在创建Demo完成后,进入项目目录
react-native -v 可以显示当前react-native的版本,如下:
react-native-cli: 0.1.10
react-native: 0.19.0
这时使用 react-native start 运行Demo项目
在编写调试代码的过程中保持此窗口的,
即启动server, 如果没有启动server
会报错React Native: ReferenceError: Can't find variable: require (line 1 in the generated bundle)
窗口会显示相关的log信息
8.开发ios程序
直接用Xcode打开ios目录下的.xcodeproj文件夹
9.开发Android程序
相比ios,android要更为麻烦些
1.安装jdk,并配置环境变量
2.安装Android Studio
3.安装Android SDK
4.配置SDK的环境变量
5.安装genymotion模拟器(建议多使用真机)
因为这是在ubuntu下开发Android,考虑到用户权限
要分别在/etc/profile和.bashrc文件中写入环境变量
并执行source .bashrc使环境变量生效
环境变量如下,路径略做修改即可
# set jdk environment
export JAVA_HOME=/usr/lib/jvm/jdk1.8.0_60
export JRE_HOME=${JAVA_HOME}/jre
export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib
export PATH=${JAVA_HOME}/bin:$PATH
#set android sdk tools environment
export ANDROID_HOME=/home/uxstone/android/sdk/
export PATH=$PATH:$ANDROID_HOME/platform-tools/
10.运行Andorid项目
可以使用模拟器可以使用真机(注意要保证react-native运行的Server和Andorid程序在同一个网络环境下)
在Demo项目目录下,执行react-native run-android 即可打包编译APK了
正常运行屏幕会显示Welcome to React Native 点击菜单健(真机可以摇一摇)显示相关调试按钮
在这里要介绍如何把真机和Server相连
在弹出的调试菜单中的Dev Settings中的Debug Server host中写上Server端的ip地址+端口,例如 192.168.0.1:8081
端口是在React Native 的Server开头显示的
在编码调试过程中一定不能关闭Server窗口(即第7步中react-native start命令的那个窗口)
本文永久更新地址:
------分隔线----------------------------React-Native For Android 环境搭建及踩坑 & Beta空间
Pythoner,Web Developer
React-Native For Android 环境搭建及踩坑
本文默认以MacOS为系统,毕竟除了用React Native搞Android,你也会想用它搞iOS。
首先当然是Android的环境搭建,这里还是推荐把整个Android开发环境都弄起来,顺便还可以学学Android。关于Android环境搭建,以及使用Android Studio可以参考我的另一篇文章
这里就不赘述了,需要注意的是,要安装好SDK,AVD(不是AV,是Android Virtual
弄好Android开发环境之后,就是搭建RN的环境.
安装方法看文档吧,,安装好之后,安装安装,在命令行中输入brew install watchman
安装Node.js
安装 4.0或更高版本。
推荐使用nvm来管理node版本,安装 nvm,,然后运行nvm install node && nvm alias default node,这将会默认安装最新版本的node并且设置好命令行的环境变量,可以使用node -v命令来查看当前node版本。
安装好之后把nvm加入环境变量里面
export NVM_DIR=&/Users/xxxxx/.nvm&
[ -s &$NVM_DIR/nvm.sh& ] && . &$NVM_DIR/nvm.sh&
不过也许你之前装过node,那么这里有坑,你要看看自己之前装的node是什么版本,实际RN在编译项目的时候会使用系统的node。
如果不幸,你系统node版本是0.XXX,那么需要先卸载已安装到全局的node和npm,不然在后面编译RN工程的时候会报错:
Installing react-native package from npm...
/Users/vasavi/dev/CLOUDSEED_APP/AwesomeProject/node_modules/react-native/local-cli/init.js:7
class CreateSuppressingTerminalAdapter extends TerminalAdapter {
SyntaxError: Unexpected reserved word
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. (/Users/vasavi/dev/CLOUDSEED_APP/AwesomeProject/node_modules/react-native/local-cli/cli.js:11:12)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
首先查看已经安装在全局的模块,以便删除这些全局模块后再按照不同的 node 版本重新进行全局安装,
运行命令npm ls -g --depth=0
之后删除全局node_modules和node
#删除全局 node_modules 目录
sudo rm -rf /usr/local/lib/node_modules
#删除 node
sudo rm /usr/local/bin/node
#删除全局 node 模块注册的软链
/usr/local/bin && ls -l | grep &../lib/node_modules/& | awk '{print $9}'| xargs rm
然后安装nvm
curl -o- /creationix/nvm/v0.29.0/install.sh | bash
初始化工程
安装好node环境之后,就可以安装React Native并初始化工程脚手架了。
执行init时切记不要在前面加上sudo(否则新项目的目录所有者会变为root而不是当前用户,导致一系列权限问题,需要使用chown修改。
$ npm install -g react-native-cli
$ react-native init AwesomeProject
由于某些原因,安装起来可能非常麻烦,各种不成功,建议设置国内的镜像。
$ npm config set registry https://registry.npm.taobao.org
$ npm config set disturl https://npm.taobao.org/dist
配置Android环境变量
确保ANDROID_HOME环境变量已经设置并路径正确。可以使用export | grep ANDROID命令来检查。
如果你使用的是bash,那就在~/.bashrc文件中加入以下内容,如果是用zsh,那就是~/.zshrc。
# 如果是通过Android Studio来安装的话多半在这里:
export ANDROID_HOME=~/Library/Android/sdk
# 如果你是通过Homebrew安装SDK的,则加入下列路径
export ANDROID_HOME=/usr/local/opt/android-sdk
进入AwesomeProject,然后运行:
$ react-native run-android
如果没有任何错误,那你牛逼了,恭喜。如果出错了,请往下看。
遇到错误:
* What went wrong:
A problem occurred configuring project ':app'.
& failed to find Build Tools revision 23.0.1
这是由于在RN Android的默认设置中,使用的Android默认构建版本是23.0.1而你很可能并没有安装这个版本的SDK,比如bo主装了23.0.2。打开AwesomeProject/android/app/build.gradle文件,找到这里配置的版本号,改成你系统安装了的,系统安装了的可以在Android SDK Manager中查看。如下,我就改成了23.0.2
compileSdkVersion 23
buildToolsVersion &23.0.2&
如果报错:
* What went wrong:
Execution failed for task ':app:installDebug'.
& com.android.builder.testing.api.DeviceException: No connected devices!
很明显,没有创建设备,建个虚拟设备,或者插上Android手机就可以了,详细的可以看上面说的安卓环境搭建。
如果报错:
dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
Error: watchman--no-pretty get-sockname returned with exit code null dyld: Library not loaded: /usr/local/lib/libpcre.1.dylib
Referenced from: /usr/local/bin/watchman
Reason: image not found
at ChildProcess.&anonymous& (/Users/Jing/Projects/ReactNative/AwesomeProject/node_modules/react-native/node_modules/sane/node_modules/fb-watchman/index.js:194:18)
at emitTwo (events.js:87:13)
at ChildProcess.emit (events.js:172:7)
at maybeClose (internal/child_process.js:817: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)
据说是因为pcre找不到,运行命令brew uninstall pcre && brew install pcre
如果出错:
Error: The `brew link` step did not complete successfullyThe formula built, but is not symlinked into /usr/localCould not symlink lib/libpcre.1.dylib
/usr/local/lib is not writable.
可以将brew转到root模式: sudo chown root:admin /usr/local/bin/brew
重新连接: sudo brew link pcre
再切回来: sudo chown xxxx:admin /usr/local/bin/brew
首先要开启USB调试。
之后使用adb devices就可以看到设备了,包括模拟器和真是设备。
另外需要注意,如果同时列出有多个设备(包括),后续编译工程可能会报错,所以最好确保只有一个设备。
之后同样是使用react-native run-android命令。
Android 5.0以上
Android 5.0以上需要使用adb reverse命令。
首先把你的设备通过USB数据线连接到电脑上,并开启USB调试。
运行adb reverse tcp:8081 tcp:8081
不需要更多配置,你就可以使用Reload JS和其它的开发选项了,按Menu键或者摇晃手机,就可以打开开发者菜单了。
Android 5.0以下
Android 5.0以下需要通过Wi-Fi连接你的本地开发服务器,下面的步骤我没试过,不过应该是真的。
首先确保你的电脑和手机设备在同一个Wi-Fi环境下。
在设备上运行你的React Native应用。和打开其它App一样操作。
你应该会看到一个“红屏”错误提示。这是正常的,下面的步骤会解决这个报错。
摇晃设备,或者运行adb shell input keyevent 82,可以打开开发者菜单。
点击进入Dev Settings。
点击Debug server host for device。
输入你电脑的IP地址和端口号(譬如10.0.1.1:8081)。在Mac上,你可以在系统设置/网络里找查询你的IP地址。在Windows上,打开命令提示符并输入ipconfig来查询你的IP地址。在Linux上你可以在终端中输入ifconfig来查询你的IP地址。
回到开发者菜单然后选择Reload JS。
adb命令找不到
如果提示adb命令找不到,做个软连接就好了。
sudo ln -sf /Users/xxxx/Library/Android/sdk/platform-tools/adb /usr/local/bin/adb
这个在国内手机还是比较常见,比如bo主的小米。这个是因为系统中默认都禁止了应用的显示悬浮窗这个权限,在手机中设置为允许就可以了。
路径大致在 设置 -& 其他应用管理 -& 选择相应的应用 -& 权限管理 -& 点击“显示悬浮窗”这个权限,将该权限设置为允许
& yucongchen 2015 自由转载-非商用-非衍生-保持署名}

我要回帖

更多关于 react native ios调试 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信