開(kāi)發(fā)堆棧的選擇是開(kāi)始新項(xiàng)目時(shí)需要做出的最關(guān)鍵的決定之一。您必須選擇一個(gè)大多數(shù)消費(fèi)者都參與的平臺(tái)。但是，該平臺(tái)不應(yīng)過(guò)度限制。

如果您的應(yīng)用程序在未來(lái)繼續(xù)擴(kuò)展，您將需要在完全不同的平臺(tái)上聯(lián)系人們。因此，您的原始堆棧應(yīng)該具有足夠的適應(yīng)性以滿足這些擴(kuò)展要求。

使用一個(gè)平臺(tái)的 API 來(lái)創(chuàng)建不同平臺(tái)的 API 的替代方案是每個(gè)試圖縮小這一差距的框架的基本概念。這就是React Native for Web所完成的。

瀏覽器兼容版本的 React Native 組件由 React Native for Web 提供。React Native for Web包含一種將此視圖編譯為 Web <div> 的方法，提供了瀏覽器兼容的 <View> 版本。此外，這用于在 React Native 移動(dòng)設(shè)備中呈現(xiàn)視圖。

然而，這里提出了一個(gè)重要的問(wèn)題。并非每個(gè)本機(jī)組件都可以呈現(xiàn)為瀏覽器友好的。一些面向移動(dòng)的組件依賴于 Web 瀏覽器無(wú)法直接訪問(wèn)的移動(dòng)硬件 API。

這意味著您的開(kāi)發(fā)人員無(wú)法使用 React Native for Web 將程序完全移植到 Web。然而，他們確實(shí)可以移植其中的大部分，而且大多數(shù)時(shí)候這就足夠了。

React 和 React Native 不同的另一個(gè)領(lǐng)域是樣式。React 中有許多可用的樣式選項(xiàng)，例如 CSS、Sass、CSS-in-JS 等。與此相反，React Native 中的所有樣式都是在 CSS-in-JS 中生成的。

React Native for Web 使用與 React Native 相同的 CSS-in-JS 策略。其實(shí)，這并不奇怪。這保證了同一組樣式在網(wǎng)絡(luò)和移動(dòng)設(shè)備上都能正常運(yùn)行?，F(xiàn)在讓我們深入了解 React Native Web 開(kāi)發(fā)。

想要真正快速地開(kāi)發(fā)您的網(wǎng)絡(luò)項(xiàng)目嗎？
我們的 React Native 開(kāi)發(fā)人員可以通過(guò)快速開(kāi)發(fā)將您的目標(biāo)實(shí)現(xiàn)到業(yè)務(wù)高度。聘請(qǐng)我們的React Native 開(kāi)發(fā)人員并可視化您的目標(biāo)！

Web 的 React Native 基礎(chǔ)知識(shí)

當(dāng)我們開(kāi)始了解用于 Web 開(kāi)發(fā)的 React Native 的核心時(shí)，您應(yīng)該首先熟悉基礎(chǔ)知識(shí)：

?? 現(xiàn)代反應(yīng)

通常，在 Web 上創(chuàng)建 React Native 時(shí)會(huì)使用現(xiàn)代 React API，例如功能組件和鉤子。因?yàn)樗?React DOM，React DOM 應(yīng)用程序可以很容易地逐步接受框架（正如 Flipkart 和 Twitter 等巨頭所接受的那樣）。盡管當(dāng)新的 API（如并發(fā)模式和服務(wù)器組件）推出時(shí)，該計(jì)劃將繼續(xù)與 React 一起發(fā)展，它試圖提供與 React 替代品的大規(guī)模合規(guī)性。

??現(xiàn)代網(wǎng)絡(luò)

為了實(shí)現(xiàn)一組特定的功能，React Native for Web 直接使用原生 DOM API。React Native for Web 與 Web 平臺(tái)一起進(jìn)步。盡管有些項(xiàng)目的 API 自創(chuàng)建以來(lái)就沒(méi)有改變過(guò)，但是當(dāng)它們?cè)跒g覽器中被廣泛采用和訪問(wèn)時(shí)，通過(guò)切換到新的 DOM API，實(shí)現(xiàn)已經(jīng)縮小并且變得相當(dāng)快。

??React Native for Web 的組件

React Native 的基本組件在 React Native for Web 中都可用。您通常會(huì)使用的主要工具是 View、Image、Text、TextInput 和 ScrollView?；窘M件包括用于交互的工具，例如高級(jí)手勢(shì)響應(yīng)系統(tǒng)。每個(gè)組件的文檔都包含可運(yùn)行的、可編輯的示例，您可以隨時(shí)試用或使用這些示例。

為了支持廣泛的用例，React Native for Web 導(dǎo)出了廣泛的模塊。您的應(yīng)用程序需要的這些模塊的數(shù)量取決于它的需要。babel 插件將簡(jiǎn)單地幫助您捆綁您當(dāng)前使用的組件。

??Web 的 React Native 樣式

React Native for Web 的組件利用 JavaScript 來(lái)創(chuàng)建樣式，這些樣式會(huì)進(jìn)一步轉(zhuǎn)換為原生 CSS。該樣式系統(tǒng)的設(shè)計(jì)可防止大規(guī)模使用 CSS 時(shí)出現(xiàn)的所有問(wèn)題，并生成高效的 CSS，而無(wú)需了解特定領(lǐng)域的樣式語(yǔ)言或解析 HTML 以消除不必要樣式的其他工具。

??世博會(huì)

現(xiàn)在，Expo 可以用來(lái)運(yùn)行 React Native Web。它支持 React Native Web。安裝并運(yùn)行 Expo 后，您可以對(duì)瀏覽器進(jìn)行更改。此外，Expo 還提供了出色的瀏覽器 UI 界面。這個(gè)概念（React Native 和 React Native Web）的總體思想是你只需要編寫(xiě)一次代碼。因此，您可以在許多平臺(tái)上運(yùn)行它。

??開(kāi)發(fā)經(jīng)驗(yàn)

您可以享受 Expo Kit 的熱重載，以及許多其他奇妙的開(kāi)發(fā)優(yōu)勢(shì)。然而，當(dāng)您來(lái)自 HTML 背景并且對(duì) react-native 的專業(yè)知識(shí)有限時(shí)，通常會(huì)觀察到使用 react-native-web 更改樣式有時(shí)可能會(huì)變得具有挑戰(zhàn)性。

??導(dǎo)航

在 react-native-web 中導(dǎo)航很容易。在最受歡迎的react-native 導(dǎo)航庫(kù)中，react-navigation 現(xiàn)在也支持 web 的 react-native，支持可以追溯到 3.0 版。

??造型

react-native-web 組件的樣式與 react-native 組件的樣式相同。如果您真的需要獨(dú)特的 Web 樣式，您當(dāng)然可以使用 Platform 創(chuàng)建條件樣式。

??良好的社區(qū)支持

React Native Web 并不像 React 目前擁有那么大的社區(qū)，因?yàn)樗且豁?xiàng)更新的創(chuàng)新和技術(shù)。然而，這里的好處是您無(wú)疑會(huì)在網(wǎng)上找到很多幫助。您可以在 StackOverflow 上查找信息或?qū)?wèn)題提交到官方 Github 存儲(chǔ)庫(kù)，網(wǎng)址為 https://github.com/necolas/react-native-web。您還可以與知名公司聯(lián)系，以幫助您輕松有效地理解和采用 react-native-web。

??可靠性和真實(shí)性

React Native for Web 已經(jīng)過(guò)廣泛的單元和生產(chǎn)測(cè)試。為了防止回歸或獲得合作伙伴的反饋，實(shí)質(zhì)性改進(jìn)首先作為金絲雀版本發(fā)布。在拉取請(qǐng)求中跟蹤對(duì)每個(gè)庫(kù)模塊的壓縮文件大小的修改。

React Native Web 的諸多優(yōu)勢(shì)

以下是 React Native Web 提供的一些顯著優(yōu)勢(shì)?？匆豢础?/span>

• React Native for Web 具有與 React Native 相同的功能，可幫助程序員開(kāi)發(fā)可訪問(wèn)的應(yīng)用程序。這是通過(guò) accessibilityLabel 和 accessibilityRole 等輔助工具實(shí)現(xiàn)的。

• 啟用特定于 Web 的程序的平臺(tái)感知執(zhí)行。由于我們不能真正依賴所有 API 來(lái)運(yùn)行，因此識(shí)別平臺(tái)至關(guān)重要，這樣您就可以只運(yùn)行與當(dāng)前平臺(tái)兼容的代碼。

• 支持在服務(wù)器上渲染。使用 AppRegistry，您可以對(duì)將用于呈現(xiàn)應(yīng)用程序的 HTML 文檔字符串進(jìn)行硬編碼。

• 您可以開(kāi)始一個(gè) Expo 項(xiàng)目，該項(xiàng)目可以通過(guò)使用 Expo Web 作為 React Native Web 的包裝器（通過(guò) Electron）在 Web、iOS、Android 甚至桌面上啟動(dòng)

• Expo Web 支持 Progressive Web Apps。

克服 React Native for Web 的局限性

現(xiàn)在，如果您認(rèn)為 React Native for Web 看起來(lái)太有希望而不是真實(shí)的，您就真的沒(méi)有完全偏離。與任何框架一樣，React Native for Web 也有一系列不同的限制。這些包括：

??對(duì) Web API 的有限支持

React Native for Web 無(wú)法訪問(wèn) React Native 中可訪問(wèn)的所有 API。這意味著您可能需要重新實(shí)現(xiàn)該操作，或者在在線使用時(shí)完全停止支持它。圖像編輯器很好地說(shuō)明了這一點(diǎn)。另一個(gè)例子是移動(dòng)硬件 API（例如加速度計(jì)）缺乏瀏覽器可訪問(wèn)性。

??兼容性

React Native for Web 缺乏對(duì)許多廣泛使用的 React Native 庫(kù)的完整覆蓋，例如 React Native Google Autocomplete。

??缺少基本元素

React Native Web 不包括所有必要的 React Native 組件。RefreshControl 是這方面的一個(gè)主要實(shí)例。您有時(shí)可以使用由第三方開(kāi)發(fā)的獨(dú)特的基于 Web 的組件版本，例如 React Native Web Refresh Control。

??樣式問(wèn)題

React Native for Web 繼承了 React Native 的所有風(fēng)格缺陷。相比之下，React Native 的樣式相對(duì)較少。一些缺乏的能力包括樣式化子組件和選擇兄弟元素。

誰(shuí)可以使用 React Native for Web？

React Native for Web 對(duì)于希望從頭開(kāi)始快速將原生應(yīng)用程序轉(zhuǎn)換為 Web 應(yīng)用程序的個(gè)人來(lái)說(shuō)是一個(gè)絕佳的選擇。此外，如果 Web 應(yīng)用程序和本機(jī)應(yīng)用程序非常相似，它也是一個(gè)很好的選擇；換句話說(shuō)，網(wǎng)絡(luò)應(yīng)用程序必須只能執(zhí)行本機(jī)應(yīng)用程序的功能。

但是，如果您想將移動(dòng)或本機(jī)應(yīng)用程序中被認(rèn)為不尋常的功能合并到您的 Web 應(yīng)用程序中，React Native for Web 將是一個(gè)糟糕的選擇。

使用 React Native Web 中的最新趨勢(shì)更新來(lái)加強(qiáng)您的技術(shù)堆棧！
我們熱情的 React Native 專家提出了市場(chǎng)優(yōu)勢(shì)的所有要求神經(jīng)。我們是實(shí)現(xiàn)您的業(yè)務(wù)目標(biāo)的理想React Native 應(yīng)用程序開(kāi)發(fā)公司。

創(chuàng)建 Web 的 React Native 應(yīng)用程序的示例教程

由于我們現(xiàn)在已經(jīng)熟悉了用于 Web 應(yīng)用程序的 React Native 概念，讓我們看一個(gè)示例教程，我們?cè)谄渲袆?chuàng)建了一個(gè) Web 友好的 RN 應(yīng)用程序。

有兩種方法可以為 Web 初始化 React Native 應(yīng)用程序：
1. Expo
2. 創(chuàng)建 React App

正如我們已經(jīng)了解了引導(dǎo)程序中的 expo 命令，以下是我們開(kāi)始項(xiàng)目所遵循的步驟：

// 使用 npm 初始化項(xiàng)目npx expo-cli 初始化你的應(yīng)用程序名稱cd 我的應(yīng)用程序// 安裝 react-dom 和 react-native-webnpm 安裝 react-dom react-native-webnpx expo-cli 開(kāi)始

但是，啟動(dòng) React Native Web 應(yīng)用程序的另一種方法是使用 create-react-app 命令，如下所示：

// 初始化 create-react-app 項(xiàng)目npx create-react-app 你的應(yīng)用程序名稱cd 我的應(yīng)用程序// 安裝 react-dom 和 react-native-webnpm 安裝 react-native-webnpm 開(kāi)始

創(chuàng)建 React Native 應(yīng)用程序后，下一步就是為 Web 準(zhǔn)備它，如下所示：

// 初始化項(xiàng)目npx create-react-app <-- 應(yīng)用程序名稱 -->

在這里，我們使用最新的 CRA 包和 npx 命令，因此我們已經(jīng)全局安裝了它，因此本地管理沒(méi)有問(wèn)題。

// 改變目錄cd <-- 應(yīng)用名稱 -->// 安裝依賴npm i react-native-web

接下來(lái)，我們將在 React Native 的注冊(cè)表 https://reactnative.dev/docs/appregistry 中注冊(cè)我們的應(yīng)用程序。如果您使用的是 expo-cli 命令，則可以省略此步驟：

從“react-native”導(dǎo)入{AppRegistry}；從“./App”導(dǎo)入應(yīng)用程序；AppRegistry.registerComponent("App", () => App);AppRegistry.runApplication("應(yīng)用", {
  rootTag: document.getElementById("根")});

此后，在應(yīng)用程序組件中，我們將按如下方式替換其代碼以添加自定義樣板代碼：

從“反應(yīng)”導(dǎo)入反應(yīng)；import { Button, StyleSheet, Text, View, Dimensions } from 'react-native';功能鏈接（道具）{
  返回 <Text {...props} accessibilityRole="link" style={StyleSheet.compose(styles.link, props.style)} />;}功能應(yīng)用程序（）{
  返回 （
    <查看樣式={styles.container}>
      <查看樣式={styles.header}>
        <Text style={styles.title}>歡迎使用 React Native for Web</Text>
      </查看>
      <文本樣式={styles.text}>
        這個(gè)入門(mén)項(xiàng)目使您能夠使用 React Native 模塊構(gòu)建 Web 應(yīng)用程序。.
      </文本>
      <文本樣式={styles.text}>
        使用 <Link href="https://github.com/facebook/create-react-app">Create React App</Link> 和{' '}
        <Link href="https://github.com/necolas/react-native-web">React Native for Web</Link>
      </文本>
      <Button onPress={() => {}} title="示例按鈕" />
    </查看>
  );}讓 ScreenHeight = Dimensions.get('window').height;const styles = StyleSheet.create({
  容器： {
    彈性：1，
    高度：屏幕高度，
    justifyContent: '中心',
    alignItems: '中心',
    背景顏色：'#F5FCFF'
  },
  標(biāo)題：{
    填充：20
  },
  標(biāo)題： {
    fontWeight: '粗體',
    fontSize: '1.5rem',
    marginVertical: '1em',
    textAlign: '居中'
  },
  文本： {
    lineHeight: '1.5em',
    fontSize: '1.125rem',
    marginVertical: '1em',
    textAlign: '居中'
  },
  關(guān)聯(lián)： {
    顏色：'#1B95E0'
  },
  代碼： {
    fontFamily: '等寬, 等寬'
  }});導(dǎo)出默認(rèn)應(yīng)用程序；

最后，我們運(yùn)行命令來(lái)測(cè)試我們的應(yīng)用程序：

npm 開(kāi)始

這是結(jié)果：

這只是用于 Web 的基本 React Native 應(yīng)用程序，您可以使用 Babel 和 webpack 根據(jù)您的喜好進(jìn)一步自定義和修改。

結(jié)論

（言鼎科技）專做軟件開(kāi)發(fā),微信小程序,網(wǎng)站開(kāi)發(fā),軟件外包,手機(jī)APP開(kāi)發(fā)，歡迎資訊！