使用React Native開發桌面應用

概述

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的歷史版本。

react-native-macos

相較於早期的react-native-windows項目，react-native-macos 是最新才發佈的，在前不久的微軟365大會才正式爲人所知曉。

環境要求

想要使用react-native-macos來開發Mac 桌面應用，那麼須要具有以下環境：

• 一臺安裝了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應用。

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

等待上面的命令執行成功後，使用cd命令進入項目，以下所示。

cd <projectName>

而後，安裝 React Native for macOS所需的依賴包，以下所示。

npx react-native-macos-init

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

cd macos && pod install && cd ..

最後，使用react-native run-macos命令運行項目便可。

npx react-native run-macos

固然，你也可使用Xcode打開React Native工程下的macos項目，而後使用Xcode運行。

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