【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

相关文章
|
10天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
3天前
|
前端开发 JavaScript Android开发
使用React Native开发跨平台移动应用的技术详解
【5月更文挑战第22天】本文详述了使用React Native开发跨平台移动应用的技术,该框架由Facebook推出,基于JavaScript,支持iOS和Android。React Native通过JNI/JSI实现JavaScript到原生代码的转换,提供高效性能和原生体验。其优势包括跨平台性、原生体验、开发速度及社区支持。开发流程涉及环境搭建、项目创建、编码、调试与测试,以及构建与发布。注意事项包括性能优化、平台适配、利用第三方库和持续学习。React Native为开发者构建高质量跨平台应用提供了便捷途径,未来潜力无限。
|
10天前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
10天前
|
移动开发 前端开发 JavaScript
使用React Native进行跨平台移动开发
【5月更文挑战第13天】React Native是Facebook的跨平台移动开发框架,基于JavaScript和React,允许开发者编写原生应用。它提供跨平台性、原生性能、平缓的学习曲线及丰富的社区支持。开发流程包括安装CLI、创建项目、编写代码、运行调试及测试发布。进阶应用涉及状态管理、性能优化、原生模块集成和自动化测试。React Native降低了开发成本,提升了效率,是移动开发的优选方案。
|
10天前
|
开发框架 前端开发 JavaScript
【专栏】对比分析两种流行的跨平台开发框架——Flutter和React Native,探讨它们的优势、劣势以及适用场景
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
|
10天前
|
存储 人工智能 开发框架
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
【AI大模型应用开发】【AutoGPT系列】0. AutoGPT概念及原理介绍 - Agent开发框架及ReAct方法
37 0
|
10天前
|
Dart 前端开发 JavaScript
《跨平台移动应用开发探索:Flutter vs React Native》
在移动应用开发领域,跨平台技术日益成熟,Flutter和React Native作为两大主流框架备受关注。本文将对比Flutter和React Native在性能、开发体验、生态系统等方面的优劣,并探讨它们在不同场景下的适用性,以帮助开发者选择最适合自己项目的技术方案。
|
10天前
|
缓存 前端开发 Android开发
React Native
React Native
16 6
|
10天前
|
前端开发 JavaScript Android开发
框架分析(8)-React Native
框架分析(8)-React Native
|
Web App开发 测试技术 开发工具
React-Native windows环境搭建记录
React-Native环境我也是折腾了两天才搭建好,并且在模拟器和真机上运行。 其中踩过的坑更是多的数不清。 但我始终坚持我的信条:只要是困难,就能解决。
1375 0