【REACT NATIVE 跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法-阿里云开发者社区

开发者社区> 余二五> 正文

【REACT NATIVE 跨平台应用开发】环境搭建问题记录&&XCODE7模拟器上COMMAND+R失效的几种替换方法

简介:
+关注继续查看

React Native 这里不多介绍,其实就是个跨平台开发原生应用的开源引擎。

更详细的介绍,大家可以搜索“facebook react native” 或 “taobao react native”

附上 React Native 官方网站:http://reactnative.cn

React Native 环境配置文档:http://reactnative.cn/docs/0.23/getting-started.html

 Mac 下进行搭建环境时(文档写的流程还是很详细的,这里只提到比较重要的步骤和要注意的):

1. 注意   react-native init AwesomeProject  这一步,可能需要等待更长的时间才能down下来 AwesomeProject项目。Himi按照文档设置了npm仓库源替换为国内镜像,但仍旧很慢。

2. 如果时间过长还是没有能down下来AwesomeProject,大家可以到下方的连接进行下载MyProject是一样的:

http://bbs.reactnative.cn/topic/11/react-native中文网官方发布完整新项目包-无需init

注意下载自己对应的平台版本。如果下载使用MyProject,需要注意如下:

a)  下载后打开 ios 目录下的 MyProject.xcodeproj  会提示 “ it is from an unidentified developer ”类似的语句,还会让你选择是否继续打开,选择open就好啦。如果没有按钮选择只是提示无法打开,那么就要去 安全选项改成 allow apps download from anywhere 。

b)  用Xcode 打开 MyProject.xcodeproj ,编译会报关于权限的错误。使用 chmod -R 777 xx  (xx 是下载MyProject的目录路径),将MyProject 所有文件都改成777或755权限,然后重新运行项目即可。

注:环境OK的话,我们开始直接使用终端命令:react-native run-ios

此命令,会重新编译、启动 React Packager、且运行到模拟器上。

环境一切配置成功之后如下图所示:(运行时,除了模拟器外还会启动React Packager)

20160407

 

3. 关于文档说,“在iOS Emulator中按下-R就可以刷新APP并看到你的最新修改!” 这里指的是Xcode7 之前的版本,所以Xcode7 或以上的版本,可以使用如下的两种方式代替:

a) 在模拟器中 使用快捷键”ctrl+command+z” 或 模拟器的菜单“Hardware->Shake Gestrue” 弹出如下;

2341

然后选择“Reload”进行刷新即可看到最新的修改后的结果。

b)  在 React Native 项目中,全局搜索“- (void)showOnShake”这个函数,然后将其中的 [self show]; 直接修改成[self reload];

这时候我们再次使用快捷键  “ctrl+command+z” 将不会显示React Native 的功能栏,而是直接刷新。

c )  绑定我们自己喜欢的快捷键,只要调用 reload 重新载入函数即可。

Windows下环境配置的过程:

  1. 根据官方文档进行即可。http://reactnative.cn/docs/0.22/android-setup.html#content

注意:

Himi使用 react-native run-android 命令无法启动 React Packager ! 虽然能安装应用到我的模拟器上,但是也无法直接启动程序....

所以Himi都是用 react-native start 先来启动 React Packager,然后手动点开安装上的项目 (哭笑不得...)

基本需要安装的如下:

a) JDK

b) Adroid-SDK

c) Android-Studio-IDE (非必要)

d)Git for Window

这里Himi用的是官方Google的模拟器,刷新的话,在模拟器中使用F2 调出功能菜单,进行Reload JS

8234444

完成后的截图:

0160408233736









本文转自 xiaominghimi 51CTO博客,原文链接:http://blog.51cto.com/xiaominghimi/1761961,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
uiz
Mac下 go环境搭建
Mac下 go环境搭建
1324 0
iOS10软件崩溃 Xcode8崩溃 打印/字体等问题汇总 韩俊强的博客
iOS开发者交流QQ群: 446310206 【1】、Xcode8代码出现ubsystem: com.apple.UIKit, category: HIDEventFiltered, enable_level: 0, persist_level: 0, default_ttl: 0, inf...
965 0
如何在 Kubernetes 环境中搭建 MySQL (二):在 cloud native 环境下配置 MySQL 的几个关键点
MySQL   MySQL 在 Kubernetes 环境中运行这件事情本身并不困难,最简单的方式就是找到 MySQL 的 Docker image,跑起来就行了,但是要做到生产环境可用,还是有几个问题要解决,所以本文不对整个流程做详细的描述,而是把重点放在几个难点上。
1489 0
Intellij IDEA采用Maven+Spring MVC+Hibernate的架构搭建一个java web项目
原文:Java web 项目搭建 Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring+Hibernate的架构搭建一个java web项目 Spring MVC+Spring+Hibernate结构介绍如下: Spring MVCSpring MVC的职责是作为web层框架,实现了我们常见的MVC模式 SpringSpring 作为服务层,利用自身特性IOC、AOP,提供数据从DAO层到Web层的桥梁作用。
3292 0
《Android应用开发入门经典(第3版)》——第1.1节建立开发环境
本节书摘来自异步社区《Android应用开发入门经典(第3版)》一书中的第1章,第1.1节建立开发环境,作者 【美】Carmen Delessio , Lauren Darcey , Shane Conder,更多章节内容可以访问云栖社区“异步社区”公众号查看 1.1 建立开发环境 Android应用开发入门经典(第3版) 要进行Android开发,首先需要创建一个可工作的开发环境。
1564 0
+关注
20382
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载