將 ReactJS 程式碼轉換為 React Native

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

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 應用程式，否則該應用程式在智慧手機中沒有原生的感覺。