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

相关文章
|
29天前
|
前端开发 JavaScript 开发者
React:JSX语法入门
React:JSX语法入门
24 0
|
3天前
|
开发框架 前端开发 JavaScript
【专栏】Flutter vs React Native:跨平台移动应用开发的比较
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
|
1月前
|
测试技术 API 调度
【Android 从入门到出门】第七章:开始使用WorkManager
【Android 从入门到出门】第七章:开始使用WorkManager
20 3
【Android 从入门到出门】第七章:开始使用WorkManager
|
1月前
|
存储 Android开发 C++
【Android 从入门到出门】第五章:使用DataStore存储数据和测试
【Android 从入门到出门】第五章:使用DataStore存储数据和测试
41 3
|
1月前
|
Android开发
【Android 从入门到出门】第四章:现代Android开发中的导航
【Android 从入门到出门】第四章:现代Android开发中的导航
22 2
【Android 从入门到出门】第四章:现代Android开发中的导航
|
1月前
|
XML API Android开发
【Android 从入门到出门】第三章:使用Hilt处理Jetpack Compose UI状态
【Android 从入门到出门】第三章:使用Hilt处理Jetpack Compose UI状态
26 4
|
1月前
|
存储 XML 编译器
【Android 从入门到出门】第二章:使用声明式UI创建屏幕并探索组合原则
【Android 从入门到出门】第二章:使用声明式UI创建屏幕并探索组合原则
48 3
|
1月前
|
存储 SQL 数据库
【Android 从入门到出门】第六章:使用Room数据库并测试
【Android 从入门到出门】第六章:使用Room数据库并测试
31 4
|
1月前
|
存储 Android开发
【Android 从入门到出门】第八章:分页入门指南
【Android 从入门到出门】第八章:分页入门指南
21 3
|
1月前
|
IDE Java 开发工具
【Android 从入门到出门】第一章:Android开发技能入门指南
【Android 从入门到出门】第一章:Android开发技能入门指南
65 3