React Native(简称 RN)是一个广泛使用的移动应用框架,它依赖于 JavaScript,能够让我们开发者使用同一套代码库就能构建出 iOS 和 Android 平台的原生渲染应用。它由 Facebook 在 2015 年作为开源项目推出,并迅速成为移动应用开发的主流解决方案之一。像 Instagram、Facebook 和 Skype 这样的主要移动应用都是基于 React Native 构建的。
React Native 的成功可以归因于几个原因。首先,它允许公司编写一次代码,就能同时用于 iOS 和 Android 应用,从而节省了大量的时间和资源。其次,React Native 是基于 React 构建的,而 React 是一个成熟的、非常流行的 JavaScript 库。第三,这个框架赋予了前端开发者(以前只能处理基于 Web 技术的开发者)为移动平台创建健壮的、可用于生产环境的应用的能力。
目录
目录
- 什么是 React Native?
- 开始使用 React Native
- 安装 React Native 的依赖项
- 第一个 React Native 应用示例:
- 开始使用 React Native 时要注意的事项
!Getting started with React Native
什么是 React Native?
React Native 是由 Facebook 开发的一个框架,用于在一种通用语言(即 JavaScript)下为 iOS 和 Android 创建原生风格的应用。最初,Facebook 开发 React Native 仅为了支持 iOS。然而,随着最近对 Android 操作系统的支持,该库现在可以为这两个平台渲染移动 UI。
开始使用 React Native
使用 React Native 进行开发非常高效且令人着迷,但刚入门时可能会稍微有点棘手。React Native 使用 Node.js(一个 JavaScript 运行时)来构建你的 JavaScript 代码。如果你还没有安装 Node.js,是时候安装它了!
安装 React Native 的依赖项
在这里我们将使用 Expo CLI 版本,它能让运行 React Native 应用变得更加顺畅。让我们按照以下步骤逐一设置 React Native 环境。
Expo: 它是一个用于通用 React 应用的框架和平台。它是一套围绕 React Native 和原生平台构建的工具和服务,帮助我们使用相同的 JavaScript/TypeScript 代码库开发、构建、部署并快速迭代 iOS、Android 和 Web 应用。
步骤 1: 打开终端并运行以下命令。
npm install -g expo-cli
步骤 2: 现在 expo-cli 已经全局安装了,你可以通过运行以下命令来创建项目文件夹。
expo init "projectName"
步骤 3: 现在进入创建好的文件夹,并使用以下命令启动服务器。
cd "projectName"
npm start web
或者,要在模拟器上运行,请使用以下命令。
npx expo start
然后分别按 ‘a’ 或 ‘i’ 在你的 Android 或 iOS 模拟器中打开它。
第一个 React Native 应用示例
这个示例演示了一个简单的 react-native 应用。
JavaScript
CODEBLOCK_b4fd82b7
输出:
开始使用 React Native 时要注意的事项
1. 使用 && 运算符进行条件渲染
在 React 中,使用 && 运算符来进行组件的条件渲染是非常常见的。例如,假设我们要在用户登录时显示用户详细信息(使用 UserDetails 组件)。我们可以像下面这样做:
{isUserLoggedIn && }
其工作原理是,如果 && 运算符之前的值是真值,那么就会渲染 && 运算符右侧的值。然而,使用 && 运算符时需要格外小心。假设在 UserDetails 组件内部,我们仅当用户邮箱存在时才显示它。我们可以再次使用相同的 && 运算符,如下所示:
“`
{emailAddress && {emailA