众所周知，React是Facebook编写的一个免费开源的JavaScript库，用于创建高度动态的WebUI。Facebook后来创建了ReactNative来开发跨平台的原生移动应用程序，使用React作为开发人员的核心接口，这使他们能够使用基于React语法的单一代码库为Android和iOS构建原生移动应用程序。React通常将其组件更改呈现为DOM（文档对象模型），但它也可以将组件呈现为HTML以满足服务器端呈现(SSR)的要求。对于ReactNative，曾经有ProtonNative，它可以生成跨平台的桌面应用程序，并让您使用Qt和wxWidgetsUI工具包呈现本机UI元素，但不再积极维护。虽然它仍然有一个活跃的分支，但在本文中我们将介绍一个更稳定、积极维护和流行的项目：react-native-windows[1]。这是Microsoft对Windows和macOS后端的ReactNative的扩展，它使相同的基于ReactNative的前端能够使用特定于平台的UI元素在Windows和macOS上本地呈现。我将解释如何使用react-native-windows项目开发Windows桌面应用程序。我们还将介绍如何通过框架的内部模块将ReactNative语法转换为本机桌面应用程序。设置开发环境确保您的计算机安装了以下版本的Windows：Windows10.0.16299.0（又名1709、Redstone3或FallCreatorsUpdate）或更高版本如果您的计算机满足上述要求，您可以在提升的系统上运行它（使用管理员权限在PowerShell窗口中运行以下命令以安装所需的依赖项。Set-ExecutionPolicyUnrestricted-ScopeProcess-Force;iex(New-ObjectSystem.Net.WebClient).DownloadString('https://raw.githubusercontent.com/microsoft/react-native-windows/master/vnext/Scripts/rnw-dependencies。ps1')上面的命令将打开开发者模式并安装VisualStudio、Chocolatey包管理器和Node.jsLTS版本。此外，如果您的计算机具有8GB或更多的物理内存，那就太好了，因为Windows构建过程通常需要高于平均水平的物理内存才能运行。上面的脚本文件推荐16GB的物理内存。如果上述脚本的第二次执行给出以下输出，您可以继续本教程。创建一个ReactNativeWindows应用程序首先，使用以下命令创建一个新的ReactNative项目。此命令将自动生成一个基本的ReactNative应用程序。npxreact-nativeinitrnApp--templatereact-native@^0.64.0ReactNative官方包只支持Android和iOS后端，因此需要运行以下命令启用Windows后端。npxreact-nativerun-windows此外，您可以添加--useHermes选项以使用HermesJavaScript引擎而不是默认的Chakra。第一个构建过程可能需要很长时间才能完成，因为它编译了许多C++源文件。如果构建过程因错误而停止，您可以使用--logging选项运行相同的命令来查找这些错误。对于构建过程中可能出现的常见错误，您可能还需要关注以下解决方案：如果构建过程花费大量时间，或者存在与Chakra相关的编译错误，请使用--useHermes选项如果构建过程引发有关缺少Windows10SDK的错误，请从VisualStudio安装程序安装它如果构建过程因证书错误而失败，请按照以下步骤使用VisualStudio为自动生成的UWP项目创建新证书[2]一些模块有空格路径的问题。请确保您的项目路径不包含任何空格。构建过程完成后，您将看到ReactNative应用程序的UWP版本，如下所示。启用热重载功能。此外，run-windows命令会在Chrome上打开ReactNative调试器。您可以使用ChromeDevTools在应用程序的JavaScript源文件中设置断点。现在，让我们了解幕后发生的事情。ReactNativeWindows中的ReactNative核心有几个基本的预定义React组件，例如View、Text、Image、TextInput和ScrollView。官方ReactNative运行时为Android和iOS操作系统呈现真正的原生UI构建块。ReactNative团队最初使原生渲染模块完全可扩展。因此，开发者社区也能够将其扩展到其他平台。react-native-windows项目添加了Windows应用程序目标支持。它可以从典型的ReactNative项目生成具有真正原生UWPGUI的Windows应用程序。UWP应用适用于所有流行的Windows平台，例如Windows10、Windows10Mobile、XboxOne系统软件和WindowsMixedReality。但是，应用程序的JavaScript部分运行在类似于原始ReactNative项目的JavaScript引擎上。react-native-windows项目最初使用的是ChakraJavaScript引擎，后来他们集成了Facebook的HermesJavaScript引擎以提高性能。使用react-native-windows开发一个简单的应用程序我们将制作一个简单的UWP应用程序，当您提交您的名字和姓氏时，该应用程序将显示一条问候消息。将以下代码添加到App.js文件。importReactfrom'react';importtype{Node}from'react';import{SafeAreaView,ScrollView,StyleSheet,Text,TextInput,Button,useColorScheme,View,Alert,}from'react-native';constApp:()=>Node=()=>{constisDarkMode=useColorScheme()==='dark';const[firstName,setFirstName]=React.useState('');const[lastName,setLastName]=React.useState('');conststyles=StyleSheet.create({dark:{color:'#fff',backgroundColor:'#000',},light:{color:'#000',backgroundColor:'#fff',},formItem:{marginBottom:6,}});constbackgroundStyle={backgroundColor:isDarkMode?styles.dark:styles.light,};constshowFullName=()=>{Alert.alert(`Hello${firstName}${lastName}`);};return(
