众所周知，React 是一个由 Facebook 编写的收费开源 JavaScript 库，用于创立高度静态的 Web UI。Facebook 后来创立了 React Native 来开发跨平台原生移动运用顺序，运用 React 作为开发人员的中心接口，这使他们可以运用基于 React 语法的单一代码库为 Android 和 iOS 构建原生移动运用顺序。
React通常将其组件变化渲染为DOM（文档对象模型），但它也可以将组件渲染为HTML，以满足效劳器端渲染（SSR）的要求。关于React Native，曾经有Proton Native，它生成了跨平台的桌面运用顺序，并让你用Qt和wxWidgets UI工具包渲染本地UI元素，但它已不再积极维护。
虽然它依然有一个生动的分支，但在本文中，我们将引见一个更波动、积极维护和盛行的项目： react-native-windows [1] 。这是 Microsoft 对 Windows 和 macOS 后端的 React Native 的扩展，它使得相反的基于 React Native 的前端将在具有特定平台 UI 元素的 Windows 和 macOS 上原生渲染。
我将解释如何运用 react-native-windows 项目开发Windows桌面运用顺序。我们还将引见React Native语法如何经过框架的外部模块转变为本地桌面运用顺序。
设置开发环境确保你的电脑安装了以下Windows版本：
Windows 10.0.16299.0（又名 1709、Redstone 3 或 Fall Creators Update）或更高版本
假设您的计算机经过了上述要求，您可以在一个提升的(具有管理员权限的)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')
上述命令将翻开开发者形式并安装 Visual Studio、Chocolatey 包管理器和 Node.js LTS 版本。此外，假设您的计算机具有 8GB 或更高的物理内存，那就太好了，由于 Windows 构建进程通常需求高于平均水平的物理内存才能运转。
上述脚本文件建议运用 16GB 的物理内存。假设上述脚本的第二次执行给出如下输入，您可以继续本教程。
首先，运用以下命令创立一个新的 React Native 项目。此命令将自动生成一个基本的 React Native 运用顺序。
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。
第一个构建进程能够需求很长时间才能完成，由于它会编译许多 C++ 源文件。假设构建进程因错误而中止，您可以运用 --logging 选项运转相反的命令来查找这些错误。
关于在构建进程中能够出现的常见错误，您能够还需求留意以下处置方案：
假设构建进程需求很多时间，或许存在与 Chakra 相关的编译错误，请运用 --useHermes 选项
假设构建进程引发关于缺少 Windows 10 SDK 的错误，请从 Visual Studio 安装顺序安装它
假设构建进程失败并出现证书错误，请按照以下步骤运用Visual Studio为自动 生成的UWP项目创立新的证书 [2]
有些模块对有空格的途径有成绩。请确保你的项目途径不包含任何空格。
一旦构建进程完成，您将看到React Native运用的UWP版本，如下所示。
热重载功用曾经启用。另外， run-windows 命令会在Chrome上翻开React Native调试器。你可以运用Chrome DevTools来为你的运用顺序的JavaScript源文件设置断点。
如今，让我们了解幕后发作的事情。
在 React Native Windows 中React Native 中心有几个基本的预定义 React 组件，如 View、Text、Image、TextInput 和 ScrollView。官方的 React Native 运转时可以为 Android 和 iOS 操作系统渲染真正的原生 UI 构建块。React Native 团队最后使原生渲染模块完全可扩展。因此，开发者社区也可以将其扩展到其他平台。
react-native-windows 项目添加了 Windows 运用顺序目的支持。它可以从典型的 React Native 项目生成具有真正原生 UWP GUI 的 Windows 运用顺序。UWP 运用顺序适用于一切盛行的 Windows 平台，例如 Windows 10、Windows 10 Mobile、Xbox One 系统软件和 Windows Mixed Reality。
但是，运用顺序的JavaScript部分运转在一个相似于原始React Native项目的JavaScript引擎上。 react-native-windows 项目最后运用的是Chakra JavaScript引擎，后来他们集成了Facebook的Hermes JavaScript引擎来提高功用。
运用 react-native-windows 开发一个复杂的运用顺序我们将制造一个复杂的UWP运用顺序，当你提交你的名字和姓氏时，它将显示问候信息。将以下代码添加到 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;
如今，经过React Native Debugger重新加载以后的运用顺序。你会看到一个像下面这样的运用顺序，依据你的主题设置停止作风化。
当您填写完文本输入后单击 OK 按钮时，您将看到一个带有问候语的音讯框，如下所示。
在这个示例运用顺序中，我们运用了几个React Native中心组件和中心api，以及React的useState Hook来获取以后用户输入。正如你所看到的，我们最终从React native组件中取得了原生UWP UI元素。
react-native-windows 扩展也支持复杂的规划完成，由于它支持 Yoga [3] 友好的语法。
React Native 开发者社区也制造了各种出色的库，并且一些库也支持 react-native-windows 。换句话说，一些盛行的 React Native 库将适用于 Android、iOS 和 Windows 运用顺序。
经过运用Visual Studio翻开UWP运用顺序源代码，可以发布运用顺序。
总结react-native-windows 项目是在官方React Native项目的早期开发阶段同时末尾的。微软最近也末尾了 react-native-macos [4] 的任务，为macOS后端扩展React Native。
react-native-windows 项目确实从基于 JavaScript 的代码库中出现特定于平台的 UI 元素。因此，假设您正在寻觅一种运用 React Native 构建高质量 Windows 桌面运用顺序的办法，那么它是最好的处置方案。
【编辑引荐】
iOS 15引入基于半身照的人物辨认功用
微软廓清：Windows 11商业版本仍默许运用淡色形式
留意了 1.75GB容量的“Windows 11”不要下载：有毒
下代Windows系统仍不完美 聊聊Windows 11的遗憾
微软 Windows 11预览版界面出 Bug：菜单暗影可掩盖其它顺序
(责任编辑：admin)