將 ReactJS 程式碼轉換為 React Native

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 將 React 轉換為 React Native
  2. 將 React 應用程式轉換為移動應用程式的替代選項
將 ReactJS 程式碼轉換為 React Native

React 和 React Native 是兩個在許多方面相似但又不同的框架。即使兩者都基於 JavaScript 和元件的可重用性,你也不能直接從 React Native 專案複製程式碼並使其與常規 React 一起工作而無需額外工作。

例如,ReactJS 程式碼通常包含對 DOM 的引用,DOM 是 Web 應用程式的介面。DOM 在智慧手機中不可用,也沒有類似的替代方案。

如果你有一個 Web 應用程式並希望在移動應用程式中複製相同的功能和視覺效果,你必須檢查每個程式碼片段。沒有工具會自動將 React 程式碼轉換為 React Native 程式碼。

如果你需要使用 GPS 和相機功能等特定於手機的功能,則會遇到額外的困難。

React Native 框架背後的團隊沒有優先考慮與主要 React 框架的相容性。它旨在作為基於 JavaScript 的替代方案,以替代使用 Java 等本地語言編寫程式碼。

但是,一般來說,瞭解如何編寫 React Web 應用程式可以讓你輕鬆過渡到編寫 React Native 應用程式。

將 React 轉換為 React Native

採用 React 應用程式並複製它們的功能和 UI 外觀當然是可能的。但是,無法直接複製程式碼。

React Native 具有不同的架構,開發人員在建立 UI 元件時必須遵循這些說明。

你可以重用樣式,因為 CSS 在兩個框架中的工作方式相同。許多應用程式邏輯,例如狀態,在這兩個框架之間也是一樣的。

但是,應用程式的一些非常重要的部分是不同的。在 React Native 中,我們使用原生元件,例如 <View><Text><Image>

ReactJS 應用程式通常使用 DOM 元素構建,例如 <div><h1> 等。

讓我們舉一個簡單的例子,一個顯示特定文字的應用程式。可以訪問 DOM 介面的 Web 應用程式如下所示。

<h1>Hello World</h1>

React Native 應用程式中的相同文字如下所示。

<View>
<Text>Hello World</Text>
</View>

任何基於 JavaScript 程式碼的邏輯都可以從 React 應用程式複製到 React Native。但是,任何對 DOM 的引用在 React Native 中都是未定義的。

例如,一個常見的例子是一個事件處理程式,它獲取輸入元素中的值並將其儲存在狀態中。使用 DOM 介面從輸入元素訪問值在 React Native 中不起作用。

將 React 應用程式轉換為移動應用程式的替代選項

Cordova 是 React Native 的替代品。它允許你將 React Web 應用程式轉換為移動應用程式,而無需重寫任何程式碼。

然而,許多 React 開發人員抱怨 Cordova 應用程式很慢,除非你優化 Cordova 應用程式,否則該應用程式在智慧手機中沒有原生的感覺。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相關文章 - React Native