链接:http://zhuanlan.zhihu.com/FrontendMagazine/19996445

数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了!

基于 PhoneGap 使用 JavaScript 和 HTML5 开发 iOS 应用已经有好几年了,那 React Native 有什么牛的?

React Native 真的很牛,让大家兴奋异常的主要原因有两点:

  1. 可以基于 React Native使用 JavaScript 编写应用逻辑,UI 则可以保持全是原生的。这样的话就没有必要就 HTML5 的 UI 做出常见的妥协;

  2. React 引入了一种与众不同的、略显激进但具备高可用性的方案来构建用户界面。长话短说,应用的 UI 简单通过一个基于应用目前状态的函数来表达。

React Native 的关键就是,以把 React 编程模式的能力带到移动开发来作为主要目标。它的目标不是跨平台一次编写到处执行,而是一次学习跨平台开发。这个是一个非常大的区别。这篇教程只介绍 iOS 平台,不过你一旦掌握了相关的概念,就可以应用到 Android 平台,快速构建 Android 应用。

如果之前只用过 Objective-C 或者 Swift 写应用的话,你很可能不会对使用 JavaScript 来编写应用的愿景感到兴奋。尽管如此,作为一个 Swift 开发者来说,上面提到的第二点应该可以激起你的兴趣!

你通过 Swift,毫无疑问学习到了新的更多有效的编码方法和技巧,鼓励转换和不变性。然而,构建 UI 的方式还是和使用 Objective-C 的方式一致。仍然以 UIKit 为基础,独断专横。

通过像 virtual DOM 和 reconciliation 这些有趣的概念,React 将函数式编程直接带到了 UI 层。

React-Native入门指南

1、环境配置

(1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦。
(2)在Mac上安装Xcode,建议Xcode 6.3以上版本
(3)安装node.js:https://nodejs.org/download/
(4)建议安装watchman,终端命令:brew install watchman
(5)安装flow:brew install flow
ok,按照以上步骤,你应该已经配置好了环境。

2、Hello, React-Native

现在我们需要创建一个React-Native的项目,因此可以按照下面的步骤:
打开终端,开始React-Native开发的旅程吧。
(1)安装命令行工具:sudo npm install -g react-native-cli
(2)创建一个空项目:react-native init HelloWorld
(3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
(4)在xcode中,使用快捷键cmd + R即可启动项目。基本的Xcode功能可以熟悉,比如模拟器的选择等。
启动完成后,你会看到React-Packger和iOS模拟器,具体的效果如下,说明你创建项目成功了。

3、改改HelloWorld

Xcode里面的代码目录结构暂时不用管了,打开HelloWorld项目文件夹,找到index.ios.js文件。
index.ios.js文件就是React-Native JS 开发之旅的入口文件了。 先来个感性的认识,修改一
些文本,下一篇会解读里面的代码。用文本编辑器打开index.ios.js文件。
(1)找到代码<Text></Text>部分:
<Text style={styles.welcome}>Welcome to React Native!
</Text>
修改成如下:
<Text style={styles.welcome}>React-Native入门学习
</Text>
(2)找到代码
welcome: {fontSize: 20,textAlign: 'center',margin: 10,
},
修改成如下:
welcome: {fontSize: 20,textAlign: 'center',margin: 10,color: 'red',
},
(3)有web开发经验的你,上面的修改你一定会体会到些什么。点击模拟器,cmd + R,刷新视图,会看到如下截图:

Android之React native的介绍和入门指南相关推荐

  1. 从 Android 到 React Native 开发(四、打包流程解析和发布为 Maven 库 )

    1.从 Android 到 React Native 开发(一.入门) 2.从 Android 到 React Native 开发(二.通信与模块实现) 3.从 Android 到 React Nat ...

  2. rn+与android+交互,React native 与Android原生交互方式(一)

    前言## 最近在做React Native开发的时候避免不了的需要原生模块和JS之间进行交互,其实RN和原生的通信大致分为两种情况:一种是Android主动向RN端发送事件和数据,另外一种是RN端被动 ...

  3. Android之React Native 中组件的生命周期

    React Native 中组件的生命周期 概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对 ...

  4. React Native 0.20官方入门教程

    最近对React Native比较有兴趣,简单把官网的入门例子做了一下,发现了很多坑,特别是watchman版本过低的问题,导致总是运行不起来.所以 这里特别下载了最新的watchman,进行了源码编 ...

  5. Android之React Native平台与Android本地模块之间的调用

    Native 模块(Android)          有时候APP需要做出React Native平台没有的功能,你也许会想用一些存在的java代码去解决问题,而不是用javascript脚本去去解 ...

  6. webstorm 运行android,Windows React Native环境搭建:webstorm+android studio 及解决热更新

    工具准备: SDK Android SDK Build-tools:23.0.1 SDK Platform:Android N .6.0 .5.1.1.5.0.1.4.4.2.4.1.2 Androi ...

  7. React Native 项目整合 CodePush 完全指南

    作者 | 钱凯 杏仁移动开发工程师,前嵌入式工程师,关注大前端技术新潮流. 本文使用的环境: React@16.3.1 React Native@0.55.4 react-native-code-pu ...

  8. Android Gradle(三)Groovy快速入门指南

    本文首发于微信公众号「刘望舒」 原文链接:Groovy快速入门看这篇就够了 前言 在前面我们学习了为什么现在要用Gradle?和Gradle入门前奏两篇文章,对Gradle也有了大概的了解,这篇文章我 ...

  9. React Native 从入门到原理

    React Native 是最近非常火的一个话题,介绍如何利用 React Native 进行开发的文章和书籍多如牛毛,但面向入门水平并介绍它工作原理的文章却寥寥无几. 本文分为两个部分:上半部分用通 ...

最新文章

  1. 搜索页面scroll下拉时候进行刷新,显示更多搜索值
  2. linux pcl 转图片,PCL转图片工具Mgosoft PCL To Image Converter
  3. BNUOJ 4064 条形码设计 (动态规划 + 递推)
  4. Django(part25)--字段查询
  5. 10.29 工作笔记 ndk编译C++,提示找不到头文件(ndk-build error: string: No such file or directory)...
  6. int char转换成string java,java中int,char,string三种类型的相互转换
  7. py2neo database
  8. Windows Mobile中的WebService应用
  9. 如何突破Windows环境限制打开“命令提示符”
  10. python read函数参数_最新Pandas.read_excel()全参数详解(案例实操,如何利用python导入excel)...
  11. Groupon的电子邮件营销故事
  12. 35岁,程序员过不去的坎?
  13. Mangos魔兽世界服务端初探(1)--游戏服务端主体结构与消息分发
  14. 魔抓编程_编程中的魔数是什么?
  15. 模块化的ESP8266小电视设计与制作
  16. 牛牛的汉诺塔(记忆化搜索)
  17. 一起学Python_Day05_常用模块及相关操作
  18. 【导弹四种坐标系及坐标系之间的变换】
  19. 目标检测/图像分割 评价标准IOU/准确率及精确率
  20. python爬b站评论_一个简单的爬取b站up下所有视频的所有评论信息的爬虫

热门文章

  1. .NET | 多线程下的调用上下文 : CallContext
  2. 面向.NET开发人员的Dapr——可观察性
  3. 单一职责在.NET中
  4. 评估服务基础性能应该参考那些指标?
  5. 进击吧! Blazor 第一期
  6. 路线错误的教训对如今的模范企业也有借鉴意义
  7. [PBI催化剂]国际水准,中国首款重量级PowerBIDeskTop外部工具问世
  8. 7.30 KubeCon2020 | 今天下午5:40 近几年最火爆的技术峰会之分享主题.NET开发者与Kuberentes...
  9. ASP.NET Core on K8s学习之旅(14)Ingress灰度发布
  10. 5种避免C#.NET中因事件造成内存泄漏的技术