【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,如需转载请自行联系原作者

目录
相关文章
|
4月前
|
前端开发 JavaScript Android开发
掌握React Native,构建跨平台移动应用的利器
掌握React Native,构建跨平台移动应用的利器
|
4月前
|
前端开发 JavaScript API
React Native实战:构建跨平台移动应用
React Native实战:构建跨平台移动应用
80 0
|
6月前
|
移动开发 前端开发 JavaScript
构建高效跨平台移动应用:React Native入门指南
【8月更文挑战第47天】在移动开发领域,React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例,带领读者快速入门React Native,并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流,以及如何打包和发布您的应用。准备好,让我们开始React Native之旅!
100 20
|
6月前
|
开发框架 Dart 前端开发
Android 跨平台方案对比之Flutter 和 React Native
本文对比了 Flutter 和 React Native 这两个跨平台移动应用开发框架。Flutter 使用 Dart 语言,提供接近原生的性能和丰富的组件库;React Native 则基于 JavaScript,具备庞大的社区支持和灵活性。两者各有优势,选择时需考虑团队技能和项目需求。
544 8
|
7月前
|
移动开发 前端开发 JavaScript
使用React Native进行跨平台移动开发:技术探索与实践
【8月更文挑战第10天】React Native以其跨平台、高性能、易学习等优势,在移动开发领域取得了显著的成果。通过合理使用React Native,开发者可以更加高效地开发出高质量、低成本的移动应用。然而,在享受React Native带来的便利的同时,我们也需要关注其潜在的挑战和限制,并通过不断学习和实践来提升我们的开发能力。
|
7月前
|
移动开发 前端开发 JavaScript
构建高效跨平台移动应用:React Native入门指南
【8月更文挑战第31天】 在移动开发领域,React Native凭借其跨平台特性和高效的开发模式赢得了开发者的青睐。本文将通过一个简易的待办事项应用实例,带领读者快速入门React Native,并展示如何利用JavaScript和React框架构建具有原生性能的应用。我们将探讨环境配置、界面布局、状态管理和数据流,以及如何打包和发布您的应用。准备好,让我们开始React Native之旅!
|
7月前
|
开发框架 Dart 前端开发
移动应用开发中的跨平台策略:React Native与Flutter的比较分析
【8月更文挑战第31天】 在快速变化的移动应用市场,开发者面临着如何在众多平台间高效部署应用的挑战。本文将深入探讨两种主流的跨平台移动应用开发框架——React Native和Flutter,通过对比它们的核心特性、性能表现以及社区生态,为开发者提供选择框架时的参考依据。我们将借助代码示例,展现两者在实际开发中的应用差异,并分析各自的优势和潜在局限,以期帮助开发者根据项目需求做出明智的技术选型。
|
7月前
|
前端开发 JavaScript Android开发
React Native 快速入门简直太棒啦!构建跨平台移动应用的捷径,带你开启高效开发之旅!
【8月更文挑战第31天】React Native凭借其跨平台特性、丰富的生态系统及优异性能,成为移动应用开发的热门选择。它允许使用JavaScript和React语法编写一次代码即可在iOS和Android上运行,显著提升开发效率。此外,基于React框架的组件化开发模式使得代码更加易于维护与复用,加之活跃的社区支持与第三方库资源,加速了应用开发流程。尽管作为跨平台框架,React Native在性能上却不输原生应用,支持原生代码优化以实现高效渲染与功能定制。对于开发者而言,React Native简化了移动应用开发流程,是快速构建高质量应用的理想之选。
136 0
|
8月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
9月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
182 1