Android之React native的介绍和入门指南

链接: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,刷新视图,会看到如下截图:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/295268.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

清华教授转述:读博6年未毕业被认定为自控力不够,或将影响个人贷款额度

全世界只有3.14 % 的人关注了爆炸吧知识图片来源&#xff1a;网络来源&#xff1a;募格课堂、微博人文清华、中国教育报、学位与写作据清华大学“人文清华”讲坛官方微博人文清华发布&#xff0c;清华大学公共管理学院院长江小涓教授在一次演讲中透露&#xff0c;互联网银行工作…

缕一缕c#可null类型

在古时候&#xff0c;引用类型是的默认值就是null&#xff0c;值类型是不可以赋值null的&#xff0c;所以那时候&#xff0c;“未将对象引用到实例”这个错误&#xff0c;是引用类型的。后来&#xff0c;值类型也可以赋值null了&#xff0c;只要在值类型变量定义的时候&#xf…

Android之Windows下搭建React Native Android开发环境(差不多搞了一天)

Android之Windows下搭建React Native Android开发环境 穷逼买不起mac,但是他们都说React Native Android只能在mac下面运行,然后到网上各种找资料看能不能在Windows下面搭建开发环境,找了几篇,但是讲得不够详细,没有图片,很虚,然后我用自己的小米手机尝试了…

这6部顶级数学纪录片,告诉你数学一点都不无趣!

全世界只有3.14 % 的人关注了爆炸吧知识丘成桐曾说&#xff0c;“中国数学发展很快&#xff0c;但距离欧洲和美国还有相当大的差距”&#xff0c;在美国排名前20的顶尖大学里&#xff0c;包括哈佛大学、普林斯顿大学、斯坦福大学、加州大学伯克利分校等&#xff0c;具有国际一流…

JAVA兔子繁衍_Java 编程经典案例之兔子繁殖迭代问题

题目有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔子长到第三个月后每个月又生一对兔子&#xff0c;假如兔子都不死&#xff0c;问第6个月的兔子总数为多少&#xff1f;分析首先我们要明白题目的意思指的是每个月的兔子总对数&#xff1b;假设将…

C# GTS四轴运动控制器实例(固高科技步进电机不带编码器) -V1

注&#xff1a;由于电机不带编码器&#xff0c;无法做home和当前位置信息读取&#xff01;功能&#xff1a;三个轴的点位运动&#xff1a;前进后退&#xff0c;并分别显示每个轴的移动脉冲数(可以换算为距离)&#xff01;开发环境&#xff1a;VS2017硬件设备&#xff1a;固高科…

java基础巩固笔记(6)-注解

2019独角兽企业重金招聘Python工程师标准>>> java基础巩固笔记(6)-注解 标签&#xff1a; java [TOC] 注解&#xff08;Annotation&#xff09;&#xff0c;也叫元数据。一种代码级别的说明。它是JDK1.5及以后版本引入的一个特性&#xff0c;与类、接口、枚举是在同…

男人都能有多浪漫?

1 如何对付有拖延症的朋友&#xff01;▼2 男人能有多浪漫&#xff1f;&#xff08;via.MOM南菁&#xff09;▼3 现实版&#xff1a;别说话吻我&#xff1f;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼4 注入了灵魂的神作&#xff01;&#xff08;素材来源网络…

InfoQ —— 腾讯游戏大数据服务场景与应用

简介 周东祥&#xff0c;本人从2010年毕业进入腾讯互动娱乐部门工作&#xff0c;一直致力在腾讯游戏运营开发工作。先后负责SAP业务受理系统&#xff0c;盗号自助系统&#xff0c;元数据系统以及近2年在腾讯游戏大数据运营开发中积累大量的大数据开发与应用经验。 介绍 数据采集…

美国人竟然花10年时间研究夫妻那些事!网上的那些传言竟然是真的......

全世界只有3.14 % 的人关注了爆炸吧知识恋爱变胖是真的爱你也是有一天超模君看到个新闻&#xff0c;某女网友在微博里发了一张秀恩爱照片&#xff0c;这次没有像往日一样收到柠檬精的艳羡&#xff0c;相反评论区一片静默。。。某女网友晒出老公四年的巨大变化图by微博一个阿呆仔…

Java常用的知识点就20_JAVA中一些需要记录的知识点

原标题&#xff1a;JAVA中一些需要记录的知识点的老师今天给大家讲java中一些重要的知识点。JDK与JRE的区别&#xff1a;JRE是所有JAVA程序运行所需要的环境&#xff0c;任何JAVA程序的运行都依赖于JRE&#xff0c;当前从JAVA官网选择安装JAVA即安装的是JRE。JDK是为开发人员所…

可以自发热的袜子,穿上暖3.9℃,这个冬天不再怕脚冷!

▲点击查看最近天气一天比一天冷&#xff0c;相信盆友们和小爆一样已经囤了不少保暖用品&#xff0c;秋衣秋裤棉拖鞋都安排好了&#xff01;等等&#xff0c;是不是有什么重要东西忘记了&#xff1f;平时出门&#xff0c;好像不穿棉拖鞋啊&#xff01;哎&#xff0c;还缺了一打…

QML的import目录爬坑记录

为什么80%的码农都做不了架构师&#xff1f;>>> 默认添加在.qrc文件里的同目录下qml文件&#xff0c;不需要添加import声明&#xff1b; 想导入自定义的组件&#xff1b; //只需要import到目录即可, //注意是qml组件文件所在的目录 import "./Dir" 但是…

收集css属性.

为什么80%的码农都做不了架构师&#xff1f;>>> body:before {content: "";position: fixed;top: -10px;left: 0;width: 100%;height: 10px;box-shadow: 0px 0px 10px rgba(0,0,0,.8);z-index: 100; } 浏览器头部阴影不支持ie .clearfix:after {clear: b…

mysql相交_MySQL相交

MySQL的相交INTERSECT运算符是SQL中的一种SET操作&#xff0c;包括UNION&#xff0c;UNION ALL&#xff0c;MINUS和INTERSECT。 INTERSECT运算符从两个或多个表中返回两组或公共记录中的不同(公共)元素。换句话说&#xff0c;它比较两个查询获得的结果并产生唯一的行&#xff0…

年轻人也太禁不起诱惑了吧?

1 好喝就够了&#xff01;▼2 为啥乌布雷纹了一个张译&#xff1f;&#xff01;▼3 美伢&#xff1a;小新&#xff0c;把我法宝拿来&#xff01;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼4 注入了灵魂的神作&#xff01;&#xff08;素材来源网络&#xff0c…

认清几种视频接口标准---无私奉献版

VGA&#xff0c;DVI和HDMI是三种视频传输标准&#xff0c;从而形成了以三种标准为基础的三种接口。所以他们是标准名称也是接口名称。在现在我们的计算机和电视设备上经常能见到。甚至有的显卡和显示器是三个接口共存的。大家对着三个名词并不陌生&#xff0c;尤其是VGA更是耳熟…

红黑树数据结构剖析

红黑树数据结构剖析红黑树是计算机科学内比较常用的一种数据结构&#xff0c;它使得对数据的搜索&#xff0c;插入和删除操作都能保持在O(lgn)的时间复杂度。然而&#xff0c;相比于一般的数据结构&#xff0c;红黑树的实现的难度有所增加。网络上关于红黑树的实现资料汗牛充栋…

python 多分类情感_python 文本情感分类

对于一个简单的文本情感分类来说&#xff0c;其实就是一个二分类&#xff0c;这篇博客主要讲述的是使用scikit-learn来做文本情感分类。分类主要分为两步&#xff1a;1)训练&#xff0c;主要根据训练集来学习分类模型的规则。2)分类&#xff0c;先用已知的测试集评估分类的准确…

.NET GC 实时监控工具 dotnet gcmon 介绍

今天介绍一个新的诊断工具 dotnet-gcmon, 也是全局 .NET CLI 工具, 它可以监控到 .NET 程序的 GC, 能获取到的信息也很详细, 另外 maoni 大佬也是其中的开发者之一。安装 gcmon和其他的 dotnet 诊断工具一样, 你可以使用以下命令&#xff0c;进行全局安装dotnet tool install -…