将 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