日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
使用ReactNative可以開發(fā)Window桌面應用了！

 眾所周知，React 是一個由 Facebook 編寫的免費開源 JavaScript 庫，用于創(chuàng)建高度動態(tài)的 Web UI。Facebook 后來創(chuàng)建了 React Native 來開發(fā)跨平臺原生移動應用程序，使用 React 作為開發(fā)人員的核心接口，這使他們能夠使用基于 React 語法的單一代碼庫為 Android 和 iOS 構(gòu)建原生移動應用程序。

創(chuàng)新互聯(lián)專注于芝罘網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供芝罘營銷型網(wǎng)站建設，芝罘網(wǎng)站制作、芝罘網(wǎng)頁設計、芝罘網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務，打造芝罘網(wǎng)絡公司原創(chuàng)品牌,更為您提供芝罘網(wǎng)站排名全網(wǎng)營銷落地服務。

React通常將其組件變化渲染為DOM（文檔對象模型），但它也可以將組件渲染為HTML，以滿足服務器端渲染（SSR）的要求。對于React Native，曾經(jīng)有Proton Native，它生成了跨平臺的桌面應用程序，并讓你用Qt和wxWidgets UI工具包渲染本地UI元素，但它已不再積極維護。

雖然它仍然有一個活躍的分支，但在本文中，我們將介紹一個更穩(wěn)定、積極維護和流行的項目： react-native-windows [1] 。這是 Microsoft 對 Windows 和 macOS 后端的 React Native 的擴展，它使得相同的基于 React Native 的前端將在具有特定平臺 UI 元素的 Windows 和 macOS 上原生渲染。

我將解釋如何使用 react-native-windows 項目開發(fā)Windows桌面應用程序。我們還將介紹React Native語法如何通過框架的內(nèi)部模塊轉(zhuǎn)變?yōu)楸镜刈烂鎽贸绦颉?/p>

設置開發(fā)環(huán)境

確保你的電腦安裝了以下Windows版本：

  • Windows 10.0.16299.0（又名 1709、Redstone 3 或 Fall Creators Update）或更高版本

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

 
 
 
 
    
  
  
  
  
  1. 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')
    2.

上述命令將打開開發(fā)者模式并安裝 Visual Studio、Chocolatey 包管理器和 Node.js LTS 版本。此外，如果您的計算機具有 8GB 或更高的物理內(nèi)存，那就太好了，因為 Windows 構(gòu)建過程通常需要高于平均水平的物理內(nèi)存才能運行。

上述腳本文件建議使用 16GB 的物理內(nèi)存。如果上述腳本的第二次執(zhí)行給出如下輸出，您可以繼續(xù)本教程。

創(chuàng)建 React Native Windows 應用程序

首先，使用以下命令創(chuàng)建一個新的 React Native 項目。此命令將自動生成一個基本的 React Native 應用程序。

 
 
 
 
    
  
  
  
  
  1. npx react-native init rnApp --template react-native@^0.64.0
    2.

官方 React Native 包僅支持 Android 和 iOS 后端，因此您需要運行以下命令來啟用 Windows 后端。

 
 
 
 
    
  
  
  
  
  1. npx react-native run-windows
    2.

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

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

對于在構(gòu)建過程中可能出現(xiàn)的常見錯誤，您可能還需要注意以下解決方案：

  • 如果構(gòu)建過程需要很多時間，或者存在與 Chakra 相關的編譯錯誤，請使用 --useHermes 選項

  • 如果構(gòu)建過程引發(fā)關于缺少 Windows 10 SDK 的錯誤，請從 Visual Studio 安裝程序安裝它

  • 如果構(gòu)建過程失敗并出現(xiàn)證書錯誤，請按照以下步驟使用Visual Studio為自動 生成的UWP項目創(chuàng)建新的證書 [2]

  • 有些模塊對有空格的路徑有問題。請確保你的項目路徑不包含任何空格。

一旦構(gòu)建過程完成，您將看到React Native應用的UWP版本，如下所示。

熱重載功能已經(jīng)啟用。另外， run-windows 命令會在Chrome上打開React Native調(diào)試器。你可以使用Chrome DevTools來為你的應用程序的JavaScript源文件設置斷點。

現(xiàn)在，讓我們了解幕后發(fā)生的事情。

在 React Native Windows 中

React Native 核心有幾個基本的預定義 React 組件，如 View、Text、Image、TextInput 和 ScrollView。官方的 React Native 運行時可以為 Android 和 iOS 操作系統(tǒng)渲染真正的原生 UI 構(gòu)建塊。React Native 團隊最初使原生渲染模塊完全可擴展。因此，開發(fā)者社區(qū)也能夠?qū)⑵鋽U展到其他平臺。

react-native-windows 項目添加了 Windows 應用程序目標支持。它可以從典型的 React Native 項目生成具有真正原生 UWP GUI 的 Windows 應用程序。UWP 應用程序適用于所有流行的 Windows 平臺，例如 Windows 10、Windows 10 Mobile、Xbox One 系統(tǒng)軟件和 Windows Mixed Reality。

然而，應用程序的JavaScript部分運行在一個類似于原始React Native項目的JavaScript引擎上。 react-native-windows 項目最初使用的是Chakra JavaScript引擎，后來他們集成了Facebook的Hermes JavaScript引擎來提高性能。

使用 react-native-windows 開發(fā)一個簡單的應用程序

我們將制作一個簡單的UWP應用程序，當你提交你的名字和姓氏時，它將顯示問候信息。將以下代碼添加到 App.js 文件中。

 
 
 
 
    
  
  
  
  
  1. import React from 'react';
    2. 
  
  
  
  
  2. import type {Node} from 'react';
    3. 
  
  
  
  
  3. import {
    4. 
  
  
  
  
  4.   SafeAreaView,
    5. 
  
  
  
  
  5.   ScrollView,
    6. 
  
  
  
  
  6.   StyleSheet,
    7. 
  
  
  
  
  7.   Text,
    8. 
  
  
  
  
  8.   TextInput,
    9. 
  
  
  
  
  9.   Button,
    10. 
  
  
  
  
  10.   useColorScheme,
    11. 
  
  
  
  
  11.   View,
    12. 
  
  
  
  
  12.   Alert,
    13. 
  
  
  
  
  13. } from 'react-native';
    14. 
  
  
  
  
  14. const App: () => Node = () => {
    15. 
  
  
  
  
  15.   const isDarkMode = useColorScheme() === 'dark';
    16. 
  
  
  
  
  16.   const [firstName, setFirstName] = React.useState('');
    17. 
  
  
  
  
  17.   const [lastName, setLastName] = React.useState('');
    18. 
  
  
  
  
  18. 
  
  
  
  
  19.   const styles = StyleSheet.create({
    20. 
  
  
  
  
  20.     dark: {
    21. 
  
  
  
  
  21.       color: '#fff',
    22. 
  
  
  
  
  22.       backgroundColor: '#000',
    23. 
  
  
  
  
  23.     },
    24. 
  
  
  
  
  24.     light: {
    25. 
  
  
  
  
  25.       color: '#000',
    26. 
  
  
  
  
  26.       backgroundColor: '#fff',
    27. 
  
  
  
  
  27.     },
    28. 
  
  
  
  
  28.     formItem: {
    29. 
  
  
  
  
  29.       marginBottom: 6,
    30. 
  
  
  
  
  30.     }
    31. 
  
  
  
  
  31.   });
    32. 
  
  
  
  
  32. 
  
  
  
  
  33.   const backgroundStyle = {
    34. 
  
  
  
  
  34.     backgroundColor: isDarkMode ? styles.dark : styles.light,
    35. 
  
  
  
  
  35.   };
    36. 
  
  
  
  
  36. 
  
  
  
  
  37.   const showFullName = () => {
    38. 
  
  
  
  
  38.     Alert.alert(`Hello ${firstName} ${lastName}`);
    39. 
  
  
  
  
  39.   };
    40. 
  
  
  
  
  40. return (
    41. 
  
  
  
  
  41.     
    42. 
  
  
  
  
  42.       
  
  
  
  
  43.         contentInsetAdjustmentBehavior="automatic"
    44. 
  
  
  
  
  44.         style={backgroundStyle}>
    45. 
  
  
  
  
  45.         
    46. 
  
  
  
  
  46.           First name
    47. 
  
  
  
  
  47.           
  
  
  
  
  48.             style={styles.formItem} 
    49. 
  
  
  
  
  49.             value={firstName} 
    50. 
  
  
  
  
  50.             onChangeText={setFirstName}
    51. 
  
  
  
  
  51.           />
    52. 
  
  
  
  
  52.           Last name
    53. 
  
  
  
  
  53.           
  
  
  
  
  54.             style={styles.formItem} 
    55. 
  
  
  
  
  55.             value={lastName} 
    56. 
  
  
  
  
  56.             onChangeText={setLastName}
    57. 
  
  
  
  
  57.           />
    58. 
  
  
  
  
  58.           
  
  
  
  
  59.             style={styles.formItem}
    60. 
  
  
  
  
  60.             title='OK' 
    61. 
  
  
  
  
  61.             onPress={showFullName}
    62. 
  
  
  
  
  62.             disabled={!firstName || !lastName}>
    63. 
  
  
  
  
  63.           
    64. 
  
  
  
  
  64.         
    65. 
  
  
  
  
  65.       
    66. 
  
  
  
  
  66.     
    67. 
  
  
  
  
  67.   );
    68. 
  
  
  
  
  68. };
    69. 
  
  
  
  
  69. export default App;
    70.

現(xiàn)在，通過React Native Debugger重新加載當前的應用程序。你會看到一個像下面這樣的應用程序，根據(jù)你的主題設置進行風格化。

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

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

react-native-windows 擴展也支持復雜的布局實現(xiàn)，因為它支持 Yoga [3] 友好的語法。

React Native 開發(fā)者社區(qū)也制作了各種出色的庫，并且一些庫也支持 react-native-windows 。換句話說，一些流行的 React Native 庫將適用于 Android、iOS 和 Windows 應用程序。

通過使用Visual Studio打開UWP應用程序源代碼，可以發(fā)布應用程序。

總結(jié)

react-native-windows 項目是在官方React Native項目的早期開發(fā)階段同時開始的。微軟最近也開始了 react-native-macos [4] 的工作，為macOS后端擴展React Native。

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


文章題目：使用ReactNative可以開發(fā)Window桌面應用了！
本文地址：http://www.dlmjj.cn/article/coiiopg.html