原文发表于我的技术博客

本文主要讲解了如何运行 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 under en0:) 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 的需求,所以此文帮助您搭建好学习此技术的一个重要的环境,有任何问题欢迎留言指教、交流。

React Native 教程:001 - 如何运行官方控件示例 App的更多相关文章

  1. 《zw版·delphi与halcon系列原创教程》zw版_THOperatorSetX控件函数列表 v11中文增强版

    <zw版·delphi与halcon系列原创教程>zw版_THOperatorSetX控件函数列表v11中文增强版 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就 ...

  2. iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图

    iOS 9应用开发教程之使用开关滑块控件以及滚动部署视图 使用ios9中的开关.滑块控件 开关和滑块也是用于和用户进行交互的控件.本节将主要讲解这两种控件. ios9开关 开关控件常用来控制某个功能的 ...

  3. 《zw版·delphi与halcon系列原创教程》zw版_THImagex控件函数列表

    <zw版·delphi与halcon系列原创教程>zw版_THImagex控件函数列表 Halcon虽然庞大,光HALCONXLib_TLB.pas文件,源码就要7w多行,但核心控件就是两 ...

  4. asp.net模板控件示例

    原文:asp.net模板控件示例 模板控件允许将控件数据与其表示形式相分离,模板化控件不提供用户界面. 编写它则是为了实现一个命名容器以及包含属性和方法可由宿主页访问的类,MSDN是这样解释的. 下面 ...

  5. React Native教程 - 调用Web API

    react-native官网Fetch介绍:https://facebook.github.io/react-native/docs/network.html#content react-native ...

  6. React Native开源项目如何运行(转载)

    学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,React Native也不例外.React Native推出了1年多了, 开源项目太多了,我们以其中一个举例子.给大家演示下如 ...

  7. 配置React Native环境及解决运行异常

    一. 安装Homebrew: Homebrew的官网(多语言版本)简单明了地介绍了如何安装和使用这个工具,;并提供了自己的Wiki. brew的安装很简单,使用一条ruby命令即可,Mac系统上已经默 ...

  8. React Native教程

    React Native 中文网  http://reactnative.cn/ 相关资料======================= React-Native学习指南 https://github ...

  9. React Native开源项目如何运行(附一波开源项目)

    学习任何技术,最快捷的方法就是学习完基础语法,然后模仿开源项目进行学习,React Native也不例外.React Native推出了1年多了, 开源项目太多了,我们以其中一个举例子.给大家演示下如 ...

随机推荐

  1. office远程代码执行(CVE-2017-11882)

    office远程代码执行(CVE-2017-11882) 影响版本: MicrosoftOffice 2000 MicrosoftOffice 2003 MicrosoftOffice 2007 Se ...

  2. Git的gc功能

    http://blog.csdn.net/lihuanshuai/article/details/37345565 Git的底层并没有采用 CVS.SVN 底层所采用的那套增量式文件系统,而是采用一套 ...

  3. PLSQL无法粘贴复制

    有2个原因会导致这个问题发生: 一:快捷键设置不正确,按照网上的设置方法把复制粘贴的快捷键重新设置一下,然后重启plsql 二:远程桌面连接开着,关闭后试下(亲测有效)

  4. cmd 命令

    cmd 在桌面或任意磁盘新建一个TXT--输入CMD并保存--修改扩展名为.BAT md 文件夹名 新建文件夹cd 文件夹名 进入到该目录cd.. 返回上一层目录cd\ 返回根目录cd.>文件名 ...

  5. 3.8Python数据处理篇之Numpy系列(八)---Numpy的梯度函数

    目录 目录 前言 (一)函数说明 (二)一维数组的应用 (三)多维数组的应用 目录 前言 梯度函数,其中的梯度也就是斜率,反映的是各个数据的变化率.在numpy中只有一个梯度函数. (一)函数说明 ( ...

  6. Django 项目连接数据库Mysql要安装mysqlclient驱动出错 : Failed building wheel for mysqlclient:

    1,如果直接用 CMD命令:pip install mysqlclient ,会安装出错. 2,解决问题,参考了这个博友的帖子:https://blog.csdn.net/qq_29784441/ar ...

  7. golang xorm框架的使用

    1.创建engine engine, err := xorm.NewEngine(driverName, dataSourceName) 上述代码创建了一个数据库引擎,可以在一个程序中创建多个engi ...

  8. QT插件+ROS 3 导入现有ROS包

    http://blog.csdn.net/u013453604/article/details/52167213#t5

  9. PCB (4)原理图导入PCB

    1导入原理图 打开原理图 之后出现对话框,检查错误,选择更新 2 自动对齐 2布线 手动布线 半自动布线 自动布线 输出

  10. Qt 编程指南 3_1 按钮弹窗手动和自动关联示例

    触发的两种模式 connect() 和 on_控件ID_控件函数(参数) 两者优缺点对比: 虽然 Qt 有比较好用的自动关联大法,但自动关联不是万能的,尤其是涉及到多个窗体的时候,比如 A 窗体私有按 ...