type
status
date
slug
summary
tags
category
icon
password
网址
使用 Expo 和 Tailwind CSS 搭建 React Native 应用程序
让我们快速概述一下如何使用 Expo 和 Tailwind CSS 框架为 React Native 应用程序设置初始项目结构。
注意：React Native 和 Expo 都是用于构建移动应用程序的框架。React Native 是核心框架，而 Expo 是在 React Native 基础上构建的更高级框架（它扩展了其功能并提供了额外的特性和工具）。在某种程度上，为 React Native 使用 Expo 可能类似于为 React 使用 Vite。
初始 Expo 设置
可以使用以下终端命令创建一个新的 Expo 项目：
运行后，您需要按 "y" 确认安装以继续，为您的应用程序选择一个名称，并等待安装完成。然后，您可以导航到项目目录：
然后，您可以根据想要在哪里查看应用程序来运行它。
Android 模拟器：
iOS 模拟器:
Opening app in browser:
注意：如果您想在当前目录中安装应用程序，可以在初始命令中添加"./"（npx create-expo-app@latest ./）。这样，您就不需要单独选择名称并在安装后更改目录。
您还可以在移动设备上安装Expo Go应用，直接在上面运行您的应用。
当应用程序运行时，终端将显示一个二维码，可以从Expo Go应用扫描该二维码在移动设备上启动应用程序。它还将显示基本命令，如"open web"（在浏览器中运行应用程序）或"open Android"（运行Android模拟；如果您安装并运行了模拟器，例如Android Studio中的模拟器，Expo将检测到它）。
注意：在Android Studio中运行模拟的快速概述：打开项目文件夹 — 打开右侧面板中的设备管理器 — 创建虚拟设备（"+"号）— 选择首选设备 — 下一步 — 为设备命名并调整您想要的任何设置 — 完成 — 开始模拟（点击列表中设备名称旁边的"播放"按钮）— 等待模拟器设置完成 — 返回您的带有Expo应用的代码编辑器（除非您直接在Android Studio中编码）— 在终端中按"a"（当您的应用正在运行时）开始模拟。
上面描述的所有内容将创建初始React Native项目文件夹和结构，然后您可以为自己的项目修改和调整它们。几个初始步骤可能是进入app.json文件并更改应用程序的名称及其图标。
如果您不想使用默认的初始样板代码，可以使用以下命令重置项目：
运行后，系统会询问您是否要将当前文件移动到"/app-example"文件夹中，而不是删除它们。您还需要重新启动开发服务器：
注意：当应用程序运行时，可以通过在终端中按"r"来重新加载应用程序。
Initial Tailwind CSS setup
如果您不想为 React Native 应用使用纯 CSS，您可以安装 Tailwind CSS 框架作为替代方案。
由于标准的 Tailwind CSS 仅支持网页平台，您需要安装额外的包（特别是 NativeWind）来实现通用支持（换句话说，为 React Native 安装 Tailwind 需要一些额外步骤，与为 React 应用安装略有不同）。
安装 NativeWind 及其对等依赖：
接下来，您需要为 Tailwind 创建一个配置文件（tailwind.config.js）：
在这个新文件中，您需要添加组件文件的路径：
然后，在您的项目 app 文件夹中创建一个 globals.css 文件，并在其中添加 Tailwind 指令：
接下来，您需要在项目根目录中创建 babel.config.js 文件，并在其中添加 Babel 预设：
您还需要自定义 metro.config.js 文件，通过创建它并更改其初始代码：
完成这些步骤后，您应该在 _layout.tsx 文件（位于 app 文件夹中）中导入您的 CSS 文件。其中的初始代码看起来像这样：
如果您使用的是 TypeScript，您可能还需要通过在项目根目录中创建 nativewind-env.d.ts 文件并在其中添加以下代码来包含类型：
完成这些步骤后最好重新启动应用程序。您还可以使用以下命令清除缓存，以确保一切从头开始重新启动：
要检查一切是否正常工作，您可以导航到 index.tsx 文件（在 app 文件夹中），移除默认内联样式并在那里添加一些 Tailwind 样式。例如（用 Tailwind 等效替换默认样式）：
这样，Tailwind 应该在您的 React Native 项目中正常运行了。
要进一步自定义，您可以添加自定义主题。例如，您可以为主要颜色添加主题（以便将它们用作变量，而不是每次都手动添加颜色）。
您可以在 tailwind.config.js 文件中进行设置：
然后您可以在 Tailwind 类中使用这种颜色：
添加 Prettier
我最后想提到的一件事是为项目添加 Prettier 代码格式化工具。设置 Prettier 本身是一个相当简单的过程，可以在 Prettier 文档中查看。但是，您也可以安装 Tailwind Prettier 插件来格式化您的类样式。它不需要为 Expo 和 React Native 额外的步骤，可以使用以下命令安装：
之后，您需要将插件添加到您的 Prettier 配置文件（项目根目录中的 .prettierrc）：
这样，Prettier 将自动格式化您的 Tailwind 类，使它们在整个代码中以相同的顺序排列所有样式。
以上是使用 Expo 和 Tailwind CSS 启动 React Native 项目的初始步骤。当然，您可以在每个框架的文档中找到更多信息。在这里，我将主要步骤汇集在一篇文章中，以作简要总结。
感谢您的阅读。
More from Dimterion
Sep 6, 2024
Recommended from Medium
- Author:无敌宝宝男sp
- URL:http://www.wudibaobaoda.top/article/2704032f-33bf-8060-995e-fda6b1c98f54
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
