React Native | Koreyoshi

type

status

date

slug

summary

什么是React Native？

首先，我们要了解一下React。

React，也被称为ReactJS或React.js，是一个免费和开源的JavaScript库。它是一个前端JavaScript库，用于开发基于UI组件的交互式用户界面。你可以使用React作为开发单页或移动应用程序的基础。

现代网站大多遵循模型-视图-控制器（MVC）架构。在MVC架构中，React是 "V"，代表着 "视图"。

一个React应用程序由多个组件组成，其中每个组件都是使用一小段可重复使用的HTML代码开发的。我们可以将这些组件与其他React组件一起使用，构建复杂的应用程序。

那么，React Native和React又有什么区别和联系呢？

ReactJS是一个JavaScript库，允许开发者创建交互式用户界面。另一方面，React Native扩展了React的功能，为开发本地移动应用提供了一个框架。但许多经验丰富的开发者并不了解React和React Native之间的区别。

React和React Native的主要区别是，React是一个前端JavaScript库，而React Native是一个移动应用框架。React是开发Web应用动态用户界面的理想选择，而React Native是开发本地移动应用程序的理想选择。除此之外，React和React Native之间还有很多其他的区别。

让我们来进一步走近ReactNative。

React Native，也被称为RN，是一个开源的UI软件框架。它是建立在React库之上的。它是一个基于JavaScript的移动应用框架，允许我们为Android和iOS建立原生渲染的应用程序。

有了这个框架，我们可以通过使用React框架的原生平台功能，为Windows、macOS、Android、iOS、Android TV、tvOS、Web和UWP开发应用程序。此外，React Native支持同时为安卓和iOS开发移动应用，因为我们可以编写可以在两个平台之间共享的代码。

简单学习一下React Native。

1 React基础

我们先来看一个简单的组件。

上面只是导出组件的写法之一。这里有一篇博客整理了不同的写法。

handy cheatsheet on JavaScript imports and exports

下面我们来看看这个return 语句。<Text>Hello, I am your cat!</Text>是一种简化 React 元素的写法，这种语法名字叫做 JSX。

2 JSX

React 和 React Native 都使用JSX 语法，这种语法使得你可以在 JavaScript 中直接输出元素（相当于传参）：<Text>Hello, I am your cat!</Text>。

3 Props属性

Props 是“properties”（属性）的简写。Props 使得我们可以定制组件。比如可以给每只<Cat>一个不同的name：（相当于定制组件的参数）

4 State状态

如果把 props 理解为定制组件渲染的参数，那么state就像是组件的私人数据记录。状态用于记录那些随时间或者用户交互而变化的数据。

按惯例来说，props 用来配置组件的第一次渲染（初始状态）。state 则用来记录组件中任意可能随时间变化的数据。

5 文本输入

TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

6 滚动视图

ScrollView是一个通用的可滚动的容器，你可以在其中放入多个组件和视图，而且这些组件并不需要是同类型的。ScrollView 不仅可以垂直滚动，还能水平滚动（通过horizontal属性来设置）,但是适合小

ScrollViews 可以通过使用pagingEnabled属性来允许使用滑动手势对视图进行分页，在 Android 上也可以利用ViewPager组件水平滑动视图。

在 iOS 上包含单个子元素的 ScrollViews 可以允许用户对内容进行缩放. 通过设置maximumZoomScale和minimumZoomScale两者的属性, 您的用户能够利用捏合以及扩大手势来放大或缩小。

ScrollView适合用来显示数量不多的滚动元素。放置在ScrollView中的所有组件都会被渲染，哪怕有些组件因为内容太长被挤出了屏幕外。如果你需要显示较长的滚动列表，那么应该使用功能差不多但性能更好的FlatList组件。

7 使用长列表

React Native 提供了几个适用于展示长列表数据的组件，一般而言我们会选用FlatList或是SectionList。

FlatList组件必须的两个属性是data和renderItem。data是列表的数据源，而renderItem则从数据源中逐个解析数据，然后返回一个设定好格式的组件来渲染。

用于显示一个垂直的滚动列表，元素结构近似，仅数据不同

只渲染屏幕可见的部分，更适合长列表数据，且元素个数可以增删

支持大规模数据，滚动时自动加载新数据

自带优化：按需渲染，回收不可见的项

下面的例子创建了一个简单的FlatList，并预设了一些模拟数据。首先是初始化FlatList所需的data，其中的每一项（行）数据之后都在renderItem中被渲染成了Text组件，最后构成整个FlatList。

如果要渲染的是一组需要分组的数据，也许还带有分组标签的，那么SectionList将是个不错的选择。

列表的一个常用场景就是从服务器端取回列表数据然后显示，要实现这一过程，你可能还需要学习React Native 的网络相关用法。

8 特定平台代码

React Native为我们快平台复用代码提供了两种方法：

使用Platfrom模块

使用特定平台后缀

但是需要注意的是，针对一些内置组件，其某些属性还是只能在特定平台上有效。

（1）Platfrom模块

React Native 提供了一个检测当前运行平台的模块。如果组件只有一小部分代码需要依据平台定制，那么这个模块就可以派上用场。

Platform.OS在 iOS 上会返回ios，而在 Android 设备或模拟器上则会返回android。

还有个实用的方法是 Platform.select()，它可以以 Platform.OS 为 key，从传入的对象中返回对应平台的值，见下面的示例：

其实可以理解为为不同设备的适配设置不同的styles方案，个人认为还是比较繁琐。这一方法可以接受任何合法类型的参数，因此你也可以直接用它针对不同平台返回不同的组件。

检测Android版本：在 Android 上，Version属性是一个数字，表示 Android 的 api level。

检测ios版本：在 iOS 上，Version属性是-[UIDevice systemVersion]的返回值，具体形式为一个表示当前系统版本的字符串。比如可能是"10.3"。

（2）特定平台后缀

当不同平台的代码逻辑较为复杂时，最好是放到不同的文件里，这时候我们可以使用特定平台后缀。React Native 会检测某个文件是否具有.ios.或是.android.的后缀，然后根据当前运行的平台自动加载正确对应的文件。

比如你可以在项目中创建下面这样的组件：

然后去掉平台后缀直接引用：

React Native 会根据运行平台的不同自动引入正确对应的组件。

9 其他参考资源

（1）常用的第三方库

应用状态管理：Redux

如果你在寻找具有某个特定功能的第三方库，那么可以看看别人精心整理的资源列表。这里还有个类似的中文资源列表。

（2）开发工具

VS Code

Ignite是一套整合了 Redux 以及一些常见 UI 组件的脚手架。它带有一个命令行可以生成 app、组件或是容器。如果你喜欢它的选择搭配，那么不妨一试。

App Center是由微软提供的热更新服务。热更新可以使你绕过 AppStore 的审核机制，直接修改已经上架的应用。对于国内用户，我们也推荐由本网站提供的Pushy热更新服务，相比 CodePush 来说，提供了全中文的文档和技术支持，服务器部署在国内速度更快，还提供了全自动的差量更新方式，大幅节约更新流量，欢迎朋友们试用和反馈意见！

Expo是一套沙盒开发环境，还带有一个已上架的空应用容器。这样你可以在没有原生开发平台（Xcode 或是 Android Studio）的情况下直接编写 React Native 应用（当然这样你只能写 js 部分代码而没法写原生代码）。

Yoga是一个独立的布局引擎。它并不局限于 React Native，高度优化的开源布局引擎能让产品工程师为多个平台快速构建布局。该引擎在设计时考虑了速度、大小和易用性。

Bugsnag, Microsoft App Center, 以及Sentry都为 React 和 React Native 应用程序提供了出色的崩溃和错误监控服务。通过这些服务，你可以实时主动监控应用程序上发生的崩溃和问题，以便快速修复它们并改善用户体验。

（3）交流社区

React Native 社区 Facebook群组拥有数千名开发人员，而且非常活跃。来这里展示你的项目，或者询问其他人是如何解决类似问题的。

Reactiflux是一个 Discord 聊天，有着很多与 React 相关的讨论，包括 React Native。Discord 就和 Slack 一样，只是它更适用于拥有无数贡献者的开源项目。请查看#react-native 频道。

React推特账户涵盖 React 和 React Native。关注 React Native推特账户和博客，聚焦 React Native 的当下。

💡

作者本人是学生，目前常用的是Windows开发环境，主要开发Android平台应用，因此这里只介绍这一种开发环境的搭建，如果要搭建其他的开发环境，可以参考官方中文文档。

搭建React Native开发环境

1 安装依赖

Node.js:大于等于18

JDK 17

Yarn:Facebook提供的替代npm的工具，可以加速node模块的下载。

2 Android开发环境

注意：国内用户！必须！有稳定的代理软件，否则在下载、安装、配置的过程中会不断遭遇链接超时或断开，无法进行开发工作。

1.下载安装Android Studio

安装界面中选择"Custom"选项，确保选中了以下几项：

Android SDK

Android SDK Platform

Android Virtual Device

然后点击"Next"来安装选中的组件。

如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。

2.安装Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 15 (VanillaIceCream)版本的 SDK（注意 SDK 版本不等于对用户系统版本的要求，RN 目前最低要求的 Android 版本请点击这里查看）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 15 (VanillaIceCream)选项，确保勾选了下面这些组件（如果你看不到这个界面，则需要使用稳定的代理软件）：

Android SDK Platform 35

Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的35.0.0版本。你可以同时安装多个其他版本。

最后点击"Apply"来下载和安装这些组件。

3.配置ANDROID_HOME环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）：

SDK 默认是安装在下面的目录：

C:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK。

你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。

4. 把工具目录添加到环境变量 Path

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把以下工具目录路径添加进去：platform-tools

%ANDROID_HOME%\platform-tools

3 创建新项目

如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突：

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用 node 自带的npx命令来使用：

必须要看的注意事项一：请不要在目录、文件名中使用中文、空格等特殊符号。请不要单独使用常见的关键字作为项目名（如 class, native, new, package 等等）。请不要使用与核心模块同名的项目名（如 react, react-native 等）。

必须要看的注意事项二：请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！

必须要看的注意事项三：请不要使用一些移植的终端环境，例如git bash或mingw等等，这些在 windows 下可能导致找不到环境变量。请使用系统自带的命令行（CMD 或 powershell）运行。

4 准备Android设备

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。后面我们所有的文档除非特别说明，并不区分真机或者模拟器。Android 官方提供了名为 Android Virtual Device（简称 AVD）的模拟器。此外还有很多第三方提供的模拟器如Genymotion、BlueStack 等。一般来说官方模拟器免费、功能完整，但性能较差。第三方模拟器性能较好，但可能需要付费，或带有广告。