SegmentFault 技术周刊 Vol.10 - React Native 丨 Learn Once, Write Anywhere

898 阅读6分钟
原文链接: segmentfault.com

结束了前两期的入门( Vol.8 - React,“5 分钟快速入门”)和进阶(Vol.9 - 进阶吧!React),为期一个月的 React 学习快要完成了。接下来,我们进入学习的最后一阶段 - React Native。

本期周刊重点学习 React Native,从上手到项目实践,希望本期的内容,可以让你对 React 的整体结构,达到一个全局的了解。

React Native 上手

上手一种新的技术,官方的文档 自然是最详实不过了。然而,很多时候看完官方文档,我们仍旧会在自己用的时候掉进各种各样的坑里,所以,我们精选下面这几篇文章,让你在上手 React Native 的同时尽量避免进坑。

ChanceKing - React Native 初构建之我等到花儿都谢了

喜欢 React Native,因为它改变了前端给大家的传统认知,拓展了前端的维度;因为它不仅能在 H5 的范畴里搞一搞,也可以侵占到客户端里翻云覆雨,因为它提高了前端的存在感,让人有所期盼和兴奋。本文作者将自己第一次构建 React Native 项目所踩的坑记录一下,如果你也准备上手 React Native,不妨一起跟着试一下。

听海 JamiE - React Native 基础练习指北(一)React Native 基础练习指北(二)

React Native 是如何开发 iOS APP?如果你也好奇,那就赶快准备好 Mac OSX, XCode, node 以及 npm,在终端输入 npm install -g react-native-clireact-native init AwesomeProject,从展示一张海报开始,聊聊模拟数据、渲染,通过接口获取线上数据并展示等环节。

陈学家_6174 - React-Native 之布局篇

宽度单位和像素密度、flex 布局、图片布局、绝对定位和相对定位、文本元素……详细的讲解方式,简洁的特征总结,帮你轻松搞定 React-Native 布局。

陈学家_6174 - React-Native 与 React-Web 的融合

对于 React-Native 在实际中的应用,Facebook 官方的说法是 React-Native 是为多平台提供共同的开发方式,而不是说一份代码,多处使用。为此,作者也尝试通过一个实际的例子(以 SampleApp 做一个简单 demo)探究一下共享代码的可行性。

cnsnake11 - React Native 增量升级方案

当修改了代码或者图片的时候,只要 app 使用新的 bundle 文件和 assets 文件夹,就完成了一次在线升级。本文将基于以上思路,尝试讲解增量升级的解决方案。

DesGemini - 初窥基于 react-art 库的 React Native SVG

在移动端,考虑到跨平台的需求,加之 web 端的技术积累,react-art 成为了现成绘制图形的解决方案,且添加了 iOS 和 Android 平台上对 react-art 的支持,在此,作者为诸位带来了(全球首发?=_=)入门文档。

静逸秋水 - React Native 开发小 Tips

相信好多写 React Native 的都是前端出身,当遇见问题时会习惯性从前端出发,但由于 React Native 本身的限制,并不是支持足够多的属性和样式,故作者结合自己的开发实践,将一些未来开发可能会遇见的问题做了总结,并给出一些小的代码参考,希望能帮助到你。

DesGemini - React Native 蛮荒开发生存指南

React Native 的发展可谓是大红大紫,但其文档更新速度却远远跟不上开发的速度,使得 React Native 的工程化恍若蛮荒生存。作者为某一商业项目开发 React Native App 已近半年,并将自己的踩坑和爬坑经验撰写成文,希望此份指南能为大家带来帮助。

React Native for Android

本章节选自侯医生的「React Native Android 安利」系列,教程将会更多的结合原生的安卓去讲 React Native,项目从搭建 React Native Android 环境开始,层层深入,跟着教程学习,可以熟练掌握 react-native-android 的开发。

1. 搭建 React Native Android 环境

搭建 React-Native 的文章虽然很多,但大多数都是搭建 JS 层面的,没有结合原生 Android 及其开发去讲。本文将简单介绍如何使用 Android Studio 与 React Native 搭建一个 React 的基础环境,并使用其成功的制作出了一个 hello world。

2. 创建简单 RN 应用(以 JS 角度来看 RN)

从成功制作出一个 hello world 之后,我们要探索一下如何利用 React-Native 制作出比 Hello World 复杂一点的界面,顺便一起审视一些 React Native Android 工程的目录结构。

4. RN 中使用 JS 调用 Java 代码

掌握 3. 如何控制原生 Android 的 activity 间跳转,我们将其中学到的原生知识,使用 JS 去调用。这样双剑合璧,便可以更加高效的开发 React-Native 应用啦~

6. React Native 中的 React.js 基础

很多关于 React-Native 的知识,都是有关于样式,底层,环境等知识的,现在我们来学习一下 React.js 的基础,我们的代码,我们创建的组件及其他相关知识。

8. 手机百度 feed 流的实现

经过上述几篇文章的学习,你将基本掌握了 React-Native 样式的书写与布局的方式。这一节,我们将一起来做个动手实践的例子,来模仿一下手机百度的新闻流,巩固一下自己的 React-Native 能力。

项目分享

ctriptech - React Native 实践之携程 Moles 框架

本次分享将通过对 Moles 框架的分享,介绍携程在 React Native 方面的实战干货,希望给大家一些灵感和启发。内容包括三个方面:

  • Moles 框架在 React Native 和我们主 App 的集成中起到了什么作用?

  • Moles 框架是如何打通 Android、iOS、H5、SEO,让我们一套代码跑在多个平台上?

  • Moles 框架的组成以及原理是怎样的?

静逸秋水 - 使用 React Native 制作圆形加载条

进度条的常规制作方法,可以用 canvas 去绘制图,也可以用 SVG 去绘制。如何使用 React Native 写这样的进度条呢?可以跟着作者一起来尝试一下这个进度条的完成方案。

DesGemini - Node.js + React Native 毕设:农业物联网监测系统的开发手记

该物联网监测系统整体上可分为三层:数据库层,服务器层和客户端层。数据库层除了原有的 Oracle 11d 数据库以外,还额外增加了一个 Redis 数据库。服务器层采用 Node.js 的 Express 框架作为客户端的 API 后台。客户端层绝大部分是 React Native 代码,另外采用了 Redux 来统一应用的事件分发和 UI 数据管理了。一起来感受下 react native 自带 buff 吧~

王铁手 - React-Native 初体验 - 使用 JavaScript 来写 iOS app

写过一个 Hybrid App 了,自觉不够,又心血来潮,耍起了 React Native,非常简单的入门,不知初体验的你是否和作者想一块儿去了。

(本期完)

往期周刊传送门:

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列,一周一主题。周刊筛选的每篇内容,是作者的独到见解,踩坑总结和经验分享。

每周二更新,欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题,推荐主题相关的优秀文章。