使用React Native开发桌面应用

时间 2020-06-15

原文原文链接

概述

React Native是Facebook技术团队于2015年4月在早先的React前端框架基础上开源的一套移动跨平台开发框架，能够同时支持iOS和Android两大移动平台。那有人会问，除了能够开发移动跨平台应用，那能不能使用React Native开发桌面客户端应用呢？答案是确定的。前端

若是有使用React Native开发桌面应用的需求，那么能够参考下微软推出的
React Native for Windows + macOS技术。React Native for Windows + macOS是微软在React Native 框架的基础上开发的一套使用React前端技术来开发桌面应用的技术，它们在GitHub上的地址分别为：react-native-windows

和react-native-macos

目前，最新版本是0.61，而React Native的最新版本是0.62.2，如下是React Native for Windows + macOS的历史版本。
node

react-native-macos

相较于早期的react-native-windows项目，react-native-macos 是最新才发布的，在前不久的微软365大会才正式为人所知晓。react

环境要求

想要使用react-native-macos来开发Mac 桌面应用，那么须要具有以下环境：android

一台安装了macOS系统的，能够编译本地代码的苹果电脑。
安装Xcode 11.3.1及以上版本。
确保安装了Xcode的命令行工具，你能够打开Xcode的"Preferences..." ，而后再Locations面板中安装这一工具。
安装 CocoaPods，若是没有安装，那么可使用“sudo gem install cocoapods”命令进行安装。
其余React Native须要的环境，如Node、Watchman等，可使用以下的命令进行安装。

brew install node
brew install watchman

基本使用

react-native-macos和React Native的使用过程相似，首先，咱们使用以下的命令建立一个React Native for macOS应用。git

npx react-native init <projectName> --version 0.61.5

等待上面的命令执行成功后，使用cd命令进入项目，以下所示。github

cd <projectName>

而后，安装 React Native for macOS所需的依赖包，以下所示。macos

npx react-native-macos-init

而后，更新你的CocoaPods版本，命令以下：npm

cd macos && pod install && cd ..

最后，使用react-native run-macos命令运行项目便可。windows

npx react-native run-macos

固然，你也可使用Xcode打开React Native工程下的macos项目，而后使用Xcode运行。react-native

React Native for Microsoft Surface Duo

在微软365大会上，微软还演示了如何使用Java和Kotlin，Xamarin和C＃以及Unity游戏在Microsoft Surface Duo上构建双屏应用。而今天咱们要讲的是如何使用JavaScript和TypeScript来开发React Native应用。

Microsoft Surface Duo是微软发布一款基于Android的折叠移动设备，以下图所示。

首先，您首先须要下载并安装Surface Duo模拟器。若是您已经使用React Native开发Android应用程序，则应具有全部必要的先决条件，并准备构建双屏应用程序。接下来，你能够按照React Native入门说明，您将经过运行如下命令来启动新项目。

npx react-native init AwesomeProject

而后启动Surface Duo模拟器，而且使用如下命令运行React Native项目：

cd AwesomeProject
npx react-native run-android

等待项目启动成功以后，就会在模拟器中看到跨越两个屏幕，以下图所示。

React Native双屏SDK是开源的，所以您能够看到为Surface Duo带来双屏功能的代码。 SDK中有两个模块：DualScreenInfo和TwoPaneView。具体参考，微软跨平台开发React Native概述

React Native DualScreenInfo

DualScreenInfo是一个非视觉帮助程序，它提供有关设备的信息，以便您的代码和布局能够适应双屏显示。它包含如下方法：

isDualScreenDevice –在访问其余双屏特定的API以前，请选中此复选框。
isSpanning –应用程序是在一个仍是两个屏幕上。
windowRects –两个显示矩形的边界（不包括铰链区域）。
didUpdateSpanning –事件监听器，所以当应用程序跨度移动或移动到单个屏幕时，您的代码能够响应。

这些API可用于在React Native应用程序中构建出色的自定义体验。按照安装说明获取软件包，使用前请确保正确配置了Android项目。包含的示例包含MasterDetail，CompanionPane和TwoPage选项-取消对App.tsx中的每一个注释的注释，以进行尝试。

React Native TwoPaneView

TwoPaneView控件为构建双屏应用程序提供了其余帮助，要将其添加到您的应用中，请首先按照dualscreeninfo说明进行Kotlin和活动配置，而后使用npm install react-native-twopaneview命令来安装模块。

您可使用此处显示的标记建立动态布局，以下所示。

<TwoPaneView panePriority={this.state.panePriority} panePriorityVerticalSpanning={this.state.panePriority} >
    {/* Pane A */}
    <MasterContent/>
    {/* Pane B */}
    <DetailContent/>
</TwoPaneView>

布局的panePriority和其余功能使您能够控制每一个屏幕配置中显示的内容。 Windows TwoPaneView文档和API参考提供了有关控件工做方式的一些提示，这些模块能够在React Native双屏示例中看到。

参考文档：
React Native apps for Microsoft Surface Duo
react-native-windows