📌  相关文章
📜  使用 React Native 和 Expo 开发 Android 和 iOS 应用程序

📅  最后修改于: 2021-10-22 03:40:13             🧑  作者: Mango

世博会! Expo 与 React Native 有何不同?我应该从 Expo 开始我的项目吗?当新手想要开始应用程序开发之旅时,他/她会想到许多问题。

但是,您很幸运,因为您降落在正确的地方。我会尽量用简单的方式解释一切。

根据 React Native 的官方文档,它用于:

“Build native mobile apps using JavaScript and React”.

让我为你分解

React Native 是一个框架,可帮助我们使用单个 JavaScript 代码库构建应用程序(Android 和 iOS)。它允许更快的开发,因为开发人员只需要知道用于开发两个应用程序(iOS 和 android)的 javascript。


一次学习,处处写

该框架使用 React.js 库——当今市场上讨论最多的词之一。现在,可能会出现一个问题——React 和 React Native 有什么区别?答案是 React Native 使用带有 JSX 的原生组件——一个 javascript 扩展,看起来像 HTML,而 React 使用 Web 组件。

React Native 组件(如视图和文本)的行为类似于 Web 组件“div”和“span”。 React Native 中的样式让你感觉像 CSS。唯一的区别是,在 React Native 中,字段名称以 CamelCase(比如 font-size)而不是虚线样式(比如 font-size)书写。它给人一种编写网络应用程序的感觉。

等待!这可能会产生另一个在 React Native 之前学习 React.js 的问题。我会说..不!你可以开始了。我在没有 React.js 知识的情况下开始了我的 React Native 之旅,但是是的,需要有一些基本的 React 组件知识,如 JSX、组件、状态和道具。

我希望你得到一些 React Native 的照片。现在让我们探索一下使用 React Native 的市场。有许多流行的应用程序是使用 React Native 构建的,例如 Facebook、Uber、Skype、Instagram……也许有一天你的应用程序会出现在这个列表中!

现在,让我们探索一下什么是世博会?它与 React Native 有何不同?

根据世博官方文件,

“Expo let you build native iOS and Android apps by writing JavaScript”.

如果您查看 React Native 的定义,两个定义看起来很相似。 Expo 正在做 React-Native 所做的事情。它们都允许我们使用 javascript 构建本机应用程序(iOS 和 Android),但有所不同。您可以认为 Expo 正在帮助我们更快地开发 React-Native 应用程序。

Expo 应用程序实际上是 React-Native 应用程序。唯一的区别是 Expo 附带了它的 SDK(Expo SDK),它只需几行代码即可为我们提供推送通知、Facebook 和 Google 登录等服务。它允许我们在一分钟内开始我们的项目。我们不需要 Xcode(适用于 iOS)和 Android 工作室(适用于 Android)即可开始。所以,更容易开始。

现在,您可能想知道为什么我要开始使用 React Native 的旅程。我将使用世博会。但是有一段来自 Brom 的引用

“Everything comes with a price”.

世博会是好的开始,但它有一些缺点。让我们列出世博会的优点和缺点。

优点:

  1. 项目设置非常简单,只需几分钟即可完成。
  2. 应用程序共享很容易(使用二维码和链接)。您可以使用“expo publish”命令发布您的应用程序并可以共享该链接。无需构建 .apk(适用于 Android)和 .ipa(适用于 iOS)。
  3. Expo 可以非常轻松地构建 .apk 和 .ipa。
  4. 它提供 Facebook、Google 登录、推送通知等服务,您可以轻松地将这些服务集成到您的应用程序中,而无需付出太多努力。

缺点:

  1. 我面临的最大缺点是 apk 或 ipa 大小。是的,基本的“hello world”应用大约有 20 到 25 MB 的大小。原因是集成库。
  2. 您不能使用用Java/Objective-C 编写的本机模块。

而已!这就是 React Native 和 Expo 的全部内容。

等待!我们知道什么是世博会。它和 React Native 有什么关系,但是如何用 Expo 设置项目,从哪里开始?以下是您的问题的答案。

让我们从使用 Expo 设置您的第一个 React Native 项目开始。

假设您已经安装了 NodeJS(如果没有,请点击此链接)。现在,使用 npm 安装expo-cli命令行实用程序:

npm install -g expo-cli

这将在您的机器上安装 expo-cli。在继续之前,我想告诉你它的两个主要部分:

第一部分是 expo-cli。它是一个在我们的开发过程中帮助我们的工具,比如我们的项目设置、构建 APK 或 IPA 等。第二部分是 Expo 客户端应用程序,我们必须在我们的 Android 或 iOS 手机上安装它以扫描二维码(您可以使用“expo start”命令获得),这将在我们的 Android 或 iOS 手机中打开一个项目。使困惑!

如果你不明白。没关系,我会一步一步解释的。

安装 expo-cli 后,让我们使用以下命令创建您的项目:

expo init myApp

它将询问选择模板。按回车键进入空白。您也可以通过示例探索第二个。现在,选择空白,然后按照以下两个命令运行您的项目。

cd myApp 
expo start

这将生成二维码。


生成的二维码

下一步是安装 Expo 客户端应用程序。可以使用手机中的 Play 商店(适用于 Android)和应用商店(适用于 iOS)安装 Expo 客户端应用程序。

现在,是时候使用 Expo 运行您的第一个 React Native 应用程序了。您可以通过使用 Expo 客户端应用程序(已安装在 Android 或 iOS 手机上)扫描二维码(在您的终端中生成)来查看您的第一个应用程序。在 Android 中,只要您扫描,它就会编译/捆绑您的项目以在您的设备上运行。


捆绑项目正在进行中。捆绑过程完成后,应用程序将在您的设备上运行。

等待!您可能会认为您可以在 iOS 设备上以同样的方式运行,这在某种程度上是正确的,但扫描二维码是使用相机完成的。 (iOS 版 Expo 中已删除 QR 扫描功能)。只需打开您的相机,一旦您扫描,就会收到通知-> 在世博会中打开您的应用程序。单击它,它将开始编译/捆绑您的应用程序以在您的 iOS 设备上运行。


单击通知,它将开始捆绑过程。

欢呼!你已经使用 Expo 成功运行了你的第一个应用程序。

是不是很容易的过程。您可以修改 app.js 的代码,并在保存更改后查看应用程序的自动重新加载。

谢谢阅读!