facebook react native 开发-----win7，mac环境搭建实践

最新推荐文章于 2018-05-31 17:33:09 发布

wxq888

最新推荐文章于 2018-05-31 17:33:09 发布

阅读量1.2k

点赞数 1

分类专栏： react-native开发文章标签： FACEBOOK react-native环境搭建 react-native真机运行

本文链接：https://blog.csdn.net/wxq888/article/details/52337079

版权

react-native开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

开发环境搭建：英文不错的可以参考facebook官方文档：http://facebook.github.io/react-native/docs/getting-started.html

不想看英文的，有中文翻译版本：http://reactnative.cn/docs/0.31/getting-started.html

开发环境分为windows和mac，还有linux，我试着在win7下搭建开发环境，遇到不少坑，然后搜索解决方案，答案基本都适合mac环境。所以果断换了mac环境。按照说明搭建mac环境很顺畅。所以建议还是用mac来开发比较好。因为facebook开发react native的团队就是用mac来开发的，只是后来移植到了windows。

环境搭好后，还需要安装开发IDE。不然用记事本来编辑程序，效率是大N折的。各种IDE介绍参看下面链接：

react native IDE 全面介绍简：http://www.cnblogs.com/jhj117/p/5611589.html

碰到坑时解决问题，上国外的网站可能比较慢，你需要修改host文件，mac下修改host可以参考：

http://www.liubingyang.com/like/host-google-mac.html

常用命令：

react-native init 创建一个指定名字的应用

react-native run-ios 建好工程后运行。

运行了两个demo时没啥问题，再次自己创建了一个工程，然后运行时报错：

Invariant Violation:Applicaction 项目名 has not been registered.This is either due to a require() error during initialization or failure to call AppRegistry.registerCommponent.

在网上搜索答案，这个写得详细些：http://www.jianshu.com/p/82a09063e61c。

但是按照这个的说法核对了app名字，也把命令行程序关闭，重新启动了，还是报错，搞了半天，最后是因为在Atom中运行了一个程序没有退出，导致的，把Atom关闭后再运行，就没错了。

========在Android真机运行========

输入命令react-native run-android 就可以在真机运行，你可能会遇到以下两个错误：

一：could not get batchedBridge ，make sure your bundle is packaged properly

在命令行运行命令：adb reverse tcp:8081 tcp:8081。或者在手机上打开dev settings ，填入你的电脑ip地址和端口,例如:10.0.0.11:8081.

二：com.android.ddmlib.AdbCommandRejectedException: device unauthorized. 这个错误可能是因为你的手机没有对Debug授权，在Android手机上设置下应该能解决：

设置方法：手机-设置-应用程序-开发-usb调试关闭，再打开一次

三：java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.

这个问题是因为你的Android 开发环境变量没有设置，设置方法如下：

1.启动Terminal终端工具
2.输入cd ~/ 进入当前用户的home目录

3. 创建bash_profile文件，命令如下：
$touch .bash_profile

4.打开并编辑，命令如下：
$open -e .bash_profile

5、在文件中写入以下内容，设置环境变量，下面第一行为你的Android adk的路径，不知道的话，在Android Studio软件的 file/Project Structrue.../SDK Location 中有sdk的路径，copy即可

export ANDROID_HOME=/Users/apple/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

6，保存并退出，关闭Terminal终端。

7，测试环境变量设置成功否：重启Terminal终端，输入以下命令试试：

$adb version

如果显示adb的版本号，那么就成功了，再次运行react-native run-android试试真机效果吧

真机调试小技巧：

摇一摇你的手机，在出来的菜单里选"Dev Settings",然后点击最下面的"dev Seting \ Debug server host & port for device",填入里电脑的ip:8081

命令行：adb shell input keyevent 82可以代替摇一摇。

========在Android模拟器运行========

请参考我的另一篇blog：mac环境下在Android终端运行程序