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

开发者社区> ghost丶桃子> 正文

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

简介:
+关注继续查看
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2147.html

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

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

相关文章
想将算法进一步开发吗?手把手教你搭建基于CNN模型的Flask Web应用
想将算法进一步开发应用产品吗?本文手把手教你搭建基于CNN模型的Flask Web应用,算是抛砖引玉了。感兴趣的读者可以将自己的算法开发成其他类型的应用产品,说不定下一个人工智能创业公司Boss就是你哦!
4890 0
基于Pacemaker的PostgreSQL一主多从读负载均衡集群搭建
基于Pacemaker的PostgreSQL一主多从读负载均衡集群搭建 简介 PostgreSQL的HA方案有很多种,本文演示基于Pacemaker的PostgreSQL一主多从读负载均衡集群搭建。
2555 0
讲座:基于云平台进行微博应用开发
  作为CSDN俱乐部的例行活动,今天由我为同学们讲新浪微博开发。原计划大一的继续在计算中心玩编程,高年级的听讲座,但据说大一的有意见,也就本周暂停编程比赛。   反思自己的思路,不管何种形式,不是要让同学们多见识一些吗?不是一直推荐“不要强调基础,能做就尽快做起来”的一种思维吗?每周五的活动尽可能变着点花样,而不是让大家感觉“苦逼”的日子从学校开始,这也是俱乐部活动长期健康进行的基础。
1037 0
uiz
Mac下 go环境搭建
Mac下 go环境搭建
1324 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层的桥梁作用。
3291 0
《Android应用开发入门经典(第3版)》——第1.1节建立开发环境
本节书摘来自异步社区《Android应用开发入门经典(第3版)》一书中的第1章,第1.1节建立开发环境,作者 【美】Carmen Delessio , Lauren Darcey , Shane Conder,更多章节内容可以访问云栖社区“异步社区”公众号查看 1.1 建立开发环境 Android应用开发入门经典(第3版) 要进行Android开发,首先需要创建一个可工作的开发环境。
1564 0
1955
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载