前言

一直以来，在不同平台开发和维护同一款产品，所付出的成本和代价都是一个令人头疼的问题，于是各类跨平台开发方案顺应而生。从Web容器方案到以React Native、Weex为代表的泛Web容器方案，最后再到以Flutter为代表的自绘引擎方案，这些优秀的跨平台开发框架们慢慢抹平了各个平台的差异，使得操作系统的边界变得越来越模糊。

最近一年来，随着Google对Flutter推广力度的加大，老牌的跨平台技术，如React Native、Weex开始走下坡路，不过还是有很多的公司仍然在使用它，加上FaceBook也并没有放弃对React Native的更新，最近FaceBook更新了React Native的0.62版本，带来了Flipper调试工具和新的暗黑模式支持。

React Native 是基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App，已经有多个应用使用它来进行跨平台手机应用开发。React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Image>替代<img>等。

在实现原理方面，React Native在主线程之外，在另一个背景线程里运行JavaScript引擎，两个线程之间通过一批量化的async消息协议来通信。UI方面React Native提供跨平台的类似Flexbox的布局系统，还支持CSS子集。可以用JSX或者普通JavaScript语言，还有CoffeeScript和TypeScript来开发。

0.62 更新内容

Flipper

React Native 0.62 发布了，此版本一大亮点是默认支持 Flipper，如下图所示。

Flipper 是用于调试移动应用的开发人员工具，它在 Android 和 iOS 社区中都很流行，Flipper 提供以下功能：

Metro Actions：重新加载应用并从工具栏直接触发开发菜单。
Crash Reporter：查看来自 Android 和 iOS 设备的崩溃报告。
React DevTools：与所有其它工具一起使用最新版本的 React DevTools。
Network Inspector：查看设备应用程序发出的所有网络请求。
Metro and Device Logs：查看、搜索和过滤来自 Metro 和设备的所有日志。
Native Layout Inspector：查看和编辑 React Native 渲染器输出的原生布局。
Database and Preference Inspectors：查看和编辑设备数据库和首选项。

想了解更多关于Flipper内容， Flipper documentation.

暗黑模式

新版本增加了一个新的模块用来支持黑暗模式，即Appearance模块，通过这个模块开发者可以设置应用的主题是深色还是亮色。

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}
复制代码

同时，React Native还添加了一个 hook 跟踪用户首选项的状态更新。

import {Text, useColorScheme} from 'react-native';

const MyComponent = () => {
  const colorScheme = useColorScheme();
  return <Text>useColorScheme(): {colorScheme}</Text>;
};
复制代码