React Native 教程:001 - 如何运行官方控件示例 App
本文主要讲解了如何运行 React Native 官方控件示例 App,包含了一些 React Native 的基础知识以及相关环境的配置。
原文发表于我的技术博客
React Native 以及示例 App 简介
关于 React Native 的简要介绍。
{% blockquote http://facebook.github.io/react-native/ %}
React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native,并将继续为 React Native 投资。
{% endblockquote %}
在官方的 Getting Started 文档中,讲解了所有组件、API 以及不同平台下的使用,但是官方的文档和示例代码是不带任何一个截图的,理解起来比较困难,特别是对于初学者。
其实在 React Native 的 GitHub 中已经提供了示例 App 的所有代码,我们只要下载后编译运行即可。
对应的代码路径如下:
示例 App 运行配置的注意点
依赖包安装
因为 React Native 的相关组件也是依赖于 npm 的包管理,所以在项目下载下来后需要初始化依赖包,方法是在项目文件根目录运行 npm install
初始化安装即可。注意是 GitHub 获取下来的根目录,因为 package.json
在此目录下,相关知识请查阅 npm 的使用。
选择相应的 js bundle 加载方式
在 iOS 项目的 AppDelegate.m 文件中,注意下面这段 js bundle 的加载方式的选择。
{% codeblock lang:objc%}
/**
- Loading JavaScript code - uncomment the one you want.
- OPTION 1
- Load from development server. Start the server from the repository root:
- $ npm start
- To run on device, change
localhost
to the IP address of your computer - (you can get this by typing
ifconfig
into the terminal and selecting the -
inet
value underen0:
) and make sure your computer and iOS device are - on the same Wi-Fi network.
*/
//sourceURL = [NSURL URLWithString:@"http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.bundle?platform=ios&dev=true"];
/**
- OPTION 2
- Load from pre-bundled file on disk. To re-generate the static bundle,
cd
- to your Xcode project folder and run
- $ curl 'http://localhost:8081/Examples/UIExplorer/UIExplorerApp.ios.bundle?platform=ios' -o main.jsbundle
- then add the
main.jsbundle
file to your project and uncomment this line:
*/
sourceURL = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
{% endcodeblock %}
- 一种你可以选择服务器路径的模式,即在运行的时候使用
npm start
生成一个服务端供请求 js bundle; - 另一种方式是编译生成 js 后直接打包进 App 里,脱离对服务端的请求,针对此示例 App ,推荐使用这种方法,可以装在自己的真机上随时随地打开研究。
运行效果
运行起来后的效果如图所示。
结语
React Native 从 2015 年开始热起来,2016 年必将是其更加火热的一年,开发易学、跨平台,非常好的产品,示例程序 App 也基本满足了我们学习基础组件和 API 的需求,所以此文帮助您搭建好学习此技术的一个重要的环境,有任何问题欢迎留言指教、交流。
作者:Parry
出处:http://www.cnblogs.com/parry/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
没有 iOS 开发者账号的情况下部署到真机的方法
原文发表于我的技术博客 本文分享了官方推荐的没有 iOS 开发者账号的情况下部署到真机的方法,供参考。原文发表于我的技术博客 1. 官方推荐的方法 原文在此,也就是 Ionic 官方团队在博客中分享的方法,我简单翻译些重要的信息,详细细节可以参考原文。 2. XCode 部署 打开 Xode 设置 preferences (Xcode > Preferences…) 点击 ‘Accounts’ 添加你的 Apple ID (+ > Add Apple ID…) 当你登录成功后,会显示一个 ‘Personal Team’ 和角色 ‘Free’。 新建一个项目,并执行 Ionic 的编译命令: ionic start testApp blank --v2 cd testApp ionic build iOS 当你连接上真机设备,选择运行的时候,会出现下面的错误: 点击 ‘Fix Issue‘ 后出现: 点击选择后会继续出现如下错误: 回到真机上点击 ‘设置’ > ‘通用‘ > ‘设备管理’,你将看到你的 Apple ID 的邮箱地址,点击即可。 这样,再回到 XCo...
- 下一篇
Ionic 入门与实战之第一章:Ionic 介绍与相关学习资源
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第一章,主要对 Ionic 的概念、发展历程、适配的移动平台等知识进行了介绍,并分享了 Ionic 相关的学习资源。原文发表于我的技术博客 1. Ionic 简介 在前端技术发展越来越快的今天,Hybrid App 开发技术也受到了很大的影响。Ionic 在 2013 年发布第一个版本,目前已经发布到了 2.0 Beta 6 (2016/04/25),是一个比较成熟,也是发展比较快的一个 Hybrid App 开发框架。 1.1 Ionic 的正确发音 这里先给出 Ionic 的正确读音。 UK /aɪˈɒn.ɪk/ US /aɪˈɑː.nɪk/ 1.2 Ionic 使用到的技术点 Ionic 以 AngularJS 和 Apache Cordova 为基础,使用 Node.js 进行模块管理,只使用 HTML5、CSS(Sass) 和 JavaScript 技术进行 App 开发。所以如果有相关知识的开发经验,如网站开发,那么学习起来是非常的快速的。具体的知识点在后续的章节会陆续介绍学习。 2. Ionic 支持的平台...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- 设置Eclipse缩进为4个空格,增强代码规范
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS关闭SELinux安全模块
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS6,CentOS7官方镜像安装Oracle11G