React Native Android(Genymotion) 环境搭建 for mac

最终目的:
在genymotion模拟器上运行React Native的示例项目

一、创建genymotion模拟器

  1. 安装genymotion
    https://www.genymotion.com/download/
  2. 安装virtual box
    http://rj.baidu.com/soft/detail/25850.html?ald
  3. 创建安卓虚拟机,除图示选项外其他默认
React Native Android(Genymotion) 环境搭建 for mac_第1张图片
Paste_Image.png

二、根据文档下载示例项目,并进行初始化

http://reactnative.cn/docs/0.27/getting-started.html#content

三、调整buildVersion,已试23的所有版均无法正常启动,只有24正常

React Native Android(Genymotion) 环境搭建 for mac_第2张图片
Paste_Image.png

四、调整genymotion模拟器的SDK目录为AndroidStudio的SDK目录,否则启动项目的adb命令会连接不上genymotion模拟器(Android Studio的安装,请按第二步的文档进行安装并进行环境变量的设置)

React Native Android(Genymotion) 环境搭建 for mac_第3张图片
Paste_Image.png

五、app启动之后会提示无法连接到服务器,需要在app上设置服务器的ip和port

React Native Android(Genymotion) 环境搭建 for mac_第4张图片
Paste_Image.png
React Native Android(Genymotion) 环境搭建 for mac_第5张图片
Paste_Image.png
React Native Android(Genymotion) 环境搭建 for mac_第6张图片
填写自己pc上在路由器上的ip

六、进行调试

React Native Android(Genymotion) 环境搭建 for mac_第7张图片
Paste_Image.png
React Native Android(Genymotion) 环境搭建 for mac_第8张图片
Paste_Image.png

你可能感兴趣的:(React Native Android(Genymotion) 环境搭建 for mac)