使用React Native可以開發(fā)Window桌面應(yīng)用了！

眾所周知，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元素，但它已不再積極維護(hù)。

雖然它仍然有一個活躍的分支，但在本文中，我們將介紹一個更穩(wěn)定、積極維護(hù)和流行的項目：react-native-windows^[1]。這是 Microsoft 對 Windows 和 macOS 后端的 React Native 的擴(kuò)展，它使得相同的基于 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）或更高版本

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

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 版本。此外，如果您的計算機(jī)具有 8GB 或更高的物理內(nèi)存，那就太好了，因為 Windows 構(gòu)建過程通常需要高于平均水平的物理內(nèi)存才能運(yùn)行。

上述腳本文件建議使用 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 后端，因此您需要運(yùn)行以下命令來啟用 Windows 后端。

npx react-native run-windows

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

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

對于在構(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 運(yùn)行時可以為 Android 和 iOS 操作系統(tǒng)渲染真正的原生 UI 構(gòu)建塊。React Native 團(tuán)隊最初使原生渲染模塊完全可擴(kuò)展。因此，開發(fā)者社區(qū)也能夠?qū)⑵鋽U(kuò)展到其他平臺。

react-native-windows 項目添加了 Windows 應(yīng)用程序目標(biāo)支持。它可以從典型的 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部分運(yùn)行在一個類似于原始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è)置進(jìn)行風(fēng)格化。

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

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

react-native-windows 擴(kuò)展也支持復(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后端擴(kuò)展React Native。

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

原文：https://blog.logrocket.com/react-native-desktop-using-react-native-windows/
作者：Shalitha Suranga

參考資料