眾所周知，React 是一個由 Facebook 編寫的免費開源 JavaScript 庫，用于創(chuàng)建高度動態(tài)的 Web UI。Facebook 后來創(chuàng)建了 React Native 來開發(fā)跨平臺原生移動應(yīng)用程序，使用 React 作為開發(fā)人員的核心接口，這使他們能夠使用基于 React 語法的單一代碼庫為 Android 和 iOS 構(gòu)建原生移動應(yīng)用程序。

React通常將其組件變化渲染為DOM（文檔對象模型），但它也可以將組件渲染為HTML，以滿足服務(wù)器端渲染（SSR）的要求。對于React Native，曾經(jīng)有Proton Native，它生成了跨平臺的桌面應(yīng)用程序，并讓你用Qt和wxWidgets UI工具包渲染本地UI元素，但它已不再積極維護。

雖然它仍然有一個活躍的分支，但在本文中，我們將介紹一個更穩(wěn)定、積極維護和流行的項目： react-native-windows ^[1] 。這是 Microsoft 對 Windows 和 macOS 后端的 React Native 的擴展，它使得相同的基于 React Native 的前端將在具有特定平臺 UI 元素的 Windows 和 macOS 上原生渲染。

我將解釋如何使用 react-native-windows 項目開發(fā)Windows桌面應(yīng)用程序。我們還將介紹React Native語法如何通過框架的內(nèi)部模塊轉(zhuǎn)變?yōu)楸镜刈烂鎽?yīng)用程序。

設(shè)置開發(fā)環(huán)境

確保你的電腦安裝了以下Windows版本：

• Windows 10.0.16299.0（又名 1709、Redstone 3 或 Fall Creators Update）或更高版本

如果您的計算機通過了上述要求，您可以在一個提升的(具有管理員權(quán)限的)PowerShell窗口中運行以下命令來安裝所需的依賴項。

Set-ExecutionPolicy Unrestricted -Scope Process -Force; iex (New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/microsoft/react-native-windows/master/vnext/Scripts/rnw-dependencies.ps1') 

上述命令將打開開發(fā)者模式并安裝 Visual Studio、Chocolatey 包管理器和 Node.js LTS 版本。此外，如果您的計算機具有 8GB 或更高的物理內(nèi)存，那就太好了，因為 Windows 構(gòu)建過程通常需要高于平均水平的物理內(nèi)存才能運行。

上述腳本文件建議使用 16GB 的物理內(nèi)存。如果上述腳本的第二次執(zhí)行給出如下輸出，您可以繼續(xù)本教程。

創(chuàng)建 React Native Windows 應(yīng)用程序

首先，使用以下命令創(chuàng)建一個新的 React Native 項目。此命令將自動生成一個基本的 React Native 應(yīng)用程序。

npx react-native init rnApp --template react-native@^0.64.0 

官方 React Native 包僅支持 Android 和 iOS 后端，因此您需要運行以下命令來啟用 Windows 后端。

npx react-native run-windows 

此外，您可以添加 --useHermes 選項以使用 Hermes JavaScript 引擎而不是默認的 Chakra。

第一個構(gòu)建過程可能需要很長時間才能完成，因為它會編譯許多 C++ 源文件。如果構(gòu)建過程因錯誤而停止，您可以使用 --logging 選項運行相同的命令來查找這些錯誤。

對于在構(gòu)建過程中可能出現(xiàn)的常見錯誤，您可能還需要注意以下解決方案：

• 如果構(gòu)建過程需要很多時間，或者存在與 Chakra 相關(guān)的編譯錯誤，請使用 --useHermes 選項

• 如果構(gòu)建過程引發(fā)關(guān)于缺少 Windows 10 SDK 的錯誤，請從 Visual Studio 安裝程序安裝它

• 如果構(gòu)建過程失敗并出現(xiàn)證書錯誤，請按照以下步驟使用Visual Studio為自動 生成的UWP項目創(chuàng)建新的證書 ^[2]

• 有些模塊對有空格的路徑有問題。請確保你的項目路徑不包含任何空格。

一旦構(gòu)建過程完成，您將看到React Native應(yīng)用的UWP版本，如下所示。

熱重載功能已經(jīng)啟用。另外， run-windows 命令會在Chrome上打開React Native調(diào)試器。你可以使用Chrome DevTools來為你的應(yīng)用程序的JavaScript源文件設(shè)置斷點。

現(xiàn)在，讓我們了解幕后發(fā)生的事情。

在 React Native Windows 中

React Native 核心有幾個基本的預(yù)定義 React 組件，如 View、Text、Image、TextInput 和 ScrollView。官方的 React Native 運行時可以為 Android 和 iOS 操作系統(tǒng)渲染真正的原生 UI 構(gòu)建塊。React Native 團隊最初使原生渲染模塊完全可擴展。因此，開發(fā)者社區(qū)也能夠?qū)⑵鋽U展到其他平臺。

react-native-windows 項目添加了 Windows 應(yīng)用程序目標支持。它可以從典型的 React Native 項目生成具有真正原生 UWP GUI 的 Windows 應(yīng)用程序。UWP 應(yīng)用程序適用于所有流行的 Windows 平臺，例如 Windows 10、Windows 10 Mobile、Xbox One 系統(tǒng)軟件和 Windows Mixed Reality。

然而，應(yīng)用程序的JavaScript部分運行在一個類似于原始React Native項目的JavaScript引擎上。 react-native-windows 項目最初使用的是Chakra JavaScript引擎，后來他們集成了Facebook的Hermes JavaScript引擎來提高性能。

使用 react-native-windows 開發(fā)一個簡單的應(yīng)用程序

我們將制作一個簡單的UWP應(yīng)用程序，當(dāng)你提交你的名字和姓氏時，它將顯示問候信息。將以下代碼添加到 App.js 文件中。

import React from 'react'; 
import type {Node} from 'react'; 
import { 
  SafeAreaView, 
  ScrollView, 
  StyleSheet, 
  Text, 
  TextInput, 
  Button, 
  useColorScheme, 
  View, 
  Alert, 
} from 'react-native'; 
const App: () => Node = () => { 
  const isDarkMode = useColorScheme() === 'dark'; 
  const [firstName, setFirstName] = React.useState(''); 
  const [lastName, setLastName] = React.useState(''); 
 
  const styles = StyleSheet.create({ 
    dark: { 
      color: '#fff', 
      backgroundColor: '#000', 
    }, 
    light: { 
      color: '#000', 
      backgroundColor: '#fff', 
    }, 
    formItem: { 
      marginBottom: 6, 
    } 
  }); 
 
  const backgroundStyle = { 
    backgroundColor: isDarkMode ? styles.dark : styles.light, 
  }; 
 
  const showFullName = () => { 
    Alert.alert(`Hello ${firstName} ${lastName}`); 
  }; 
return ( 
    <SafeAreaView style={backgroundStyle}> 
      <ScrollView 
        contentInsetAdjustmentBehavior="automatic" 
        style={backgroundStyle}> 
        <View style={{padding: 12}}> 
          <Text style={backgroundStyle}>First name</Text> 
          <TextInput  
            style={styles.formItem}  
            value={firstName}  
            onChangeText={setFirstName} 
          /> 
          <Text style={backgroundStyle}>Last name</Text> 
          <TextInput  
            style={styles.formItem}  
            value={lastName}  
            onChangeText={setLastName} 
          /> 
          <Button  
            style={styles.formItem} 
            title='OK'  
            onPress={showFullName} 
            disabled={!firstName || !lastName}> 
          </Button> 
        </View> 
      </ScrollView> 
    </SafeAreaView> 
  ); 
}; 
export default App; 

現(xiàn)在，通過React Native Debugger重新加載當(dāng)前的應(yīng)用程序。你會看到一個像下面這樣的應(yīng)用程序，根據(jù)你的主題設(shè)置進行風(fēng)格化。

當(dāng)您填寫完文本輸入后單擊 OK 按鈕時，您將看到一個帶有問候語的消息框，如下所示。

在這個示例應(yīng)用程序中，我們使用了幾個React Native核心組件和核心api，以及React的useState Hook來獲取當(dāng)前用戶輸入。正如你所看到的，我們最終從React native組件中獲得了原生UWP UI元素。

react-native-windows 擴展也支持復(fù)雜的布局實現(xiàn)，因為它支持 Yoga ^[3] 友好的語法。

React Native 開發(fā)者社區(qū)也制作了各種出色的庫，并且一些庫也支持 react-native-windows 。換句話說，一些流行的 React Native 庫將適用于 Android、iOS 和 Windows 應(yīng)用程序。

通過使用Visual Studio打開UWP應(yīng)用程序源代碼，可以發(fā)布應(yīng)用程序。

總結(jié)

react-native-windows 項目是在官方React Native項目的早期開發(fā)階段同時開始的。微軟最近也開始了 react-native-macos ^[4] 的工作，為macOS后端擴展React Native。

react-native-windows 項目確實從基于 JavaScript 的代碼庫中呈現(xiàn)特定于平臺的 UI 元素。因此，如果您正在尋找一種使用 React Native 構(gòu)建高質(zhì)量 Windows 桌面應(yīng)用程序的方法，那么它是最好的解決方案。