使用React Native for Windows的桌面的React Native

我们知道，React是Facebook编写的一个免费和开源的JavaScript库，用于创建高度动态的网络UI。后来，Facebook创建了React Native，用于开发跨平台的原生移动应用，将React作为开发人员的核心接口，使他们能够用一个基于React语法的代码库为Android和iOS构建原生移动应用。

React通常将其组件变化渲染为DOM（文档对象模型），但它也可以将组件渲染为HTML，以满足服务器端渲染（SSR）的要求。对于React Native，曾经有Proton Native，它生成了跨平台的桌面应用程序，并让你用Qt和wxWidgets UI工具包渲染本地UI元素，但它已不再积极维护。

虽然仍有一个活跃的分叉，但在这篇文章中，我们将介绍一个更稳定、积极维护和流行的项目。 [react-native-windows](https://github.com/microsoft/react-native-windows).这是微软为Windows和macOS后端扩展的React Native，使同一基于React Native的前端可以在Windows和macOS上以特定平台的UI元素进行原生渲染。

我将解释你如何使用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 for Windows开发的先决条件

创建一个React Native Windows应用程序

首先，用以下命令创建一个新的React Native项目。这个命令将自动生成一个基本的React Native应用。

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

官方的React Native包只支持Android和iOS后端，所以你需要运行以下命令来启用Windows后端。

npx react-native-windows-init --overwrite

现在我们可以用下面的命令将我们新创建的React Native应用作为一个真正的本地Windows应用运行。这个命令将从当前项目的源代码中触发一个调试构建。

npx react-native run-windows

另外，你可以添加--useHermes 选项来使用Hermes JavaScript引擎而不是默认的Chakra。

第一次构建过程可能需要相当长的时间才能完成，因为它将编译许多C++源代码文件。如果构建过程因错误而停止，你可以用--logging 选项运行相同的命令来查找这些错误。

你可能还想注意一下以下在构建过程中可能出现的常见错误的解决方案。

• 如果构建过程需要很多时间，或者有与Chakra有关的编译错误，请使用--useHermes 选项
• 如果构建过程中出现关于缺少Windows 10 SDK的错误，请从Visual Studio安装程序中安装它。
• 如果构建过程中出现证书错误，请按照以下步骤为你用Visual Studio自动生成的UWP项目创建一个新的证书。
• 有些模块的路径有空格的问题。请确保你的项目路径不包含任何空格。

一旦构建过程完成，你会看到你的React Native应用程序的UWP版本，如下图所示。

最初自动生成的React Native应用作为UWP应用运行。

热重载功能已经启用。另外，run-windows 命令会在Chrome上打开React Native调试器。你可以使用Chrome DevTools来为你的应用程序的JavaScript源文件设置断点。

现在，让我们了解一下幕后发生了什么。

React Native窗口内部

React Native核心有几个基本的预定义React组件，如View、Text、Image、TextInput和ScrollView。官方的React Native运行时可以为Android和iOS操作系统渲染真正的原生UI构建块。React Native团队最初使本地渲染模块完全可扩展。因此，开发者社区也能够为其他平台扩展它。

react-native-windows 项目增加了对Windows应用程序目标的支持。它可以从你的典型React Native项目中生成一个具有真正原生UWP图形界面的Windows应用程序。UWP应用程序可以在所有流行的Windows平台上运行，如Windows 10、Windows 10 Mobile、Xbox One系统软件和Windows混合现实。

然而，你的应用程序的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重新加载当前的应用程序。你会看到一个像下面这样的应用程序，根据你的主题设置进行风格化。

当你填写完文本输入后点击确定按钮，你会得到一个带有问候语的消息框，如下图所示。

在这个例子的应用中，我们使用了几个React Native核心组件和核心API，以及React的useState Hook来获取当前的用户输入。正如你所看到的，我们最终从React Native组件中得到了原生的UWP UI元素。

react-native-windows 扩展也支持复杂的布局实现，因为它支持Yoga友好的语法。

React Native开发者社区也做了各种了不起的库，有几个库也支持react-native-windows。换句话说，一些流行的React Native库将在Android、iOS和Windows应用程序上运行。

通过用Visual Studio打开UWP应用程序的源代码，可以实现应用程序的分发。

结论

react-native-windows 项目是与官方React Native项目的早期开发阶段同时开始的。微软最近也开始在 [react-native-macos](https://github.com/microsoft/react-native-macos)来扩展React Native的macOS后端。

react-native-windows 项目确实从一个基于JavaScript的代码库中渲染了特定平台的UI元素。因此，如果你正在寻找一种方法，用React Native构建高质量的Windows桌面应用程序，它是最好的解决方案。

The postReact Native for desktop using React Native for Windowsappeared first onLogRocket Blog.