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

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

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

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


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


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


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


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模拟器,具体的效果如下,说明你创建项目成功了。

20151026225834497.png


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

20151026225937982.png

相关文章
|
11天前
|
存储 前端开发 测试技术
Android kotlin MVVM 架构简单示例入门
Android kotlin MVVM 架构简单示例入门
19 1
|
7天前
|
XML IDE Java
安卓应用开发入门:从零开始的旅程
【10月更文挑战第23天】本文将带领读者开启一段安卓应用开发的奇妙之旅。我们将从最基础的概念讲起,逐步深入到开发实践,最后通过一个简易的代码示例,展示如何将理论知识转化为实际的应用。无论你是编程新手,还是希望扩展技能的软件工程师,这篇文章都将为你提供有价值的指导和启发。
17 0
|
1月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
71 7
|
2月前
|
Android开发 开发者
安卓开发中的自定义视图:从入门到精通
【9月更文挑战第19天】在安卓开发的广阔天地中,自定义视图是一块充满魔力的土地。它不仅仅是代码的堆砌,更是艺术与科技的完美结合。通过掌握自定义视图,开发者能够打破常规,创造出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战应用,一步步展示如何用代码绘出心中的蓝图。无论你是初学者还是有经验的开发者,这篇文章都将为你打开一扇通往创意和效率的大门。让我们一起探索自定义视图的秘密,将你的应用打造成一件艺术品吧!
58 10
|
23天前
|
Web App开发 编解码 视频直播
视频直播技术干货(十二):从入门到放弃,快速学习Android端直播技术
本文详细介绍了Android端直播技术的全貌,涵盖了从实时音视频采集、编码、传输到解码与播放的各个环节。文章还探讨了直播中音视频同步、编解码器选择、传输协议以及直播延迟优化等关键问题。希望本文能为你提供有关Andriod端直播技术的深入理解和实践指导。
33 0
|
2月前
|
开发框架 Dart 前端开发
Android 跨平台方案对比之Flutter 和 React Native
本文对比了 Flutter 和 React Native 这两个跨平台移动应用开发框架。Flutter 使用 Dart 语言,提供接近原生的性能和丰富的组件库;React Native 则基于 JavaScript,具备庞大的社区支持和灵活性。两者各有优势,选择时需考虑团队技能和项目需求。
311 8
|
2月前
|
IDE Java 程序员
安卓应用开发入门:打造你的第一个“Hello World”
【9月更文挑战第11天】在编程的世界里,每一个初学者的旅程都从一个简单的“Hello World”开始。本文将带领安卓开发的新手们,通过简单直观的方式,一步步构建出自己的第一个安卓应用。我们将探索安卓工作室(Android Studio)的安装、项目的创建,以及如何运行和调试你的应用。无论你是编程新手还是想扩展技能的老手,这篇文章都将为你打开一扇通往安卓世界的大门。
151 7
|
2月前
|
IDE Java API
安卓应用开发入门:打造你的第一个"Hello World"
【9月更文挑战第11天】在探索安卓开发的海洋中,每个开发者的航行都从简单的"Hello World"开始。本文将作为你的航标,引导你驶向安卓应用开发的精彩世界。我们将一起启航,通过浅显易懂的语言和步骤,学习如何构建并运行你的第一个安卓应用。无论你是编程新手还是希望扩展技能的老手,这篇文章都将为你提供所需的知识和信心。准备好了吗?让我们揭开安卓开发的神秘面纱,一起创造些令人兴奋的东西吧!
|
3月前
|
开发者 iOS开发 C#
Uno Platform 入门超详细指南:从零开始教你打造兼容 Web、Windows、iOS 和 Android 的跨平台应用,轻松掌握 XAML 与 C# 开发技巧,快速上手示例代码助你迈出第一步
【8月更文挑战第31天】Uno Platform 是一个基于 Microsoft .NET 的开源框架,支持使用 C# 和 XAML 构建跨平台应用,适用于 Web(WebAssembly)、Windows、Linux、macOS、iOS 和 Android。它允许开发者共享几乎全部的业务逻辑和 UI 代码,同时保持原生性能。选择 Uno Platform 可以统一开发体验,减少代码重复,降低开发成本。安装时需先配置好 Visual Studio 或 Visual Studio for Mac,并通过 NuGet 或官网下载工具包。
184 0
|
3月前
|
XML IDE Java
安卓应用开发入门:打造你的第一个“Hello World”
【8月更文挑战第31天】 在安卓的浩瀚宇宙中,每一个新星都从一句简单的问候开始闪耀。本文将作为你的航标,引导你探索安卓开发的银河系。无论你是初心者还是资深开发者,构建第一个“Hello World”应用总是令人兴奋的里程碑。通过这篇文章,我们将一起搭建起通往安卓开发世界的桥梁。让我们摒弃复杂的术语,用最简单直白的语言,一步步地走过这段旅程。准备好了吗?让我们一起开启这段冒险吧!