将 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 应用程序，否则该应用程序在智能手机中没有原生的感觉。