React Native 0.62 发布,添加暗黑模式支持

5,056 阅读3分钟

前言

一直以来,在不同平台开发和维护同一款产品,所付出的成本和代价都是一个令人头疼的问题,于是各类跨平台开发方案顺应而生。从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>;
};

苹果TV的开发支持

除了上面两点之外,React Native 将对AppleTv开发支持的核心库进行了剥离,相关的开发库移到了react-native-community/react-native-tvos,使用NPM包react-native-tvos进行开发维护。

版本升级的支持

众所周知,每次升级React Native版本都是非常酸爽的体验,里面的坑,没有踩过的是不会了解其中的痛。为了更好支持开发者完成版本升级,Facebook专门开辟了一个 名为Upgrade-Support的Github仓库,开发者可以在里面反馈升级遇到的问题。

除此之外,React Native 0.62还修复了一些Bug,并且减少React Native的核心代码以减少应用体积。

最后,附上我的一本《React Native移动开发实战》,本书基于0.60.x编写,欢迎吐槽!

在这里插入图片描述

另外,《Flutter跨平台开发实战》已经提交出版社,也将于近期出版,欢迎关注。

参考资料:React Native 0.62 更新日志