关于前端:使用React-Native可以开发Window桌面应用了

家喻户晓，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。这是 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 Windows 应用程序

首先，应用以下命令创立一个新的 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 我的项目创立新的证书
• 有些模块对有空格的门路有问题。请确保你的我的项目门路不蕴含任何空格。

一旦构建过程实现，您将看到 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 敌对的语法。

React Native 开发者社区也制作了各种杰出的库，并且一些库也反对 react-native-windows。换句话说，一些风行的 React Native 库将实用于 Android、iOS 和 Windows 应用程序。

通过应用 Visual Studio 关上 UWP 应用程序源代码，能够公布应用程序。

总结

react-native-windows 我的项目是在官网 React Native 我的项目的晚期开发阶段同时开始的。微软最近也开始了 react-native-macos 的工作，为 macOS 后端扩大 React Native。

react-native-windows 我的项目的确从基于 JavaScript 的代码库中出现特定于平台的 UI 元素。因而，如果您正在寻找一种应用 React Native 构建高质量 Windows 桌面应用程序的办法，那么它是最好的解决方案。