第 11 章 使用 Bolt 和 Expo 构建本地移动应用程序 使用 Bolt 和 Expo构建原生移动应用程序
本作品已使用人工智能进行翻译。欢迎您提供反馈和意见:translation-feedback@oreilly.com
Bolt.new 通过与 Expo(开发 React Native 应用程序的框架和工具)合作,支持原生移动应用程序。这种集成使开发人员只需描述应用程序,就能完全在浏览器中构建 iOS 和 Android 应用程序,将 React Native 的强大功能与 Bolt 的人工智能驱动开发融合在一起。
Expo 框架提供了一套用于访问原生设备功能(如摄像头和传感器)的库,以及一个用于在实际设备上进行实时预览的开发应用程序 Expo Go。Bolt 通过在 StackBlitz 的 WebContainers(第 10 章将讨论)内运行 Expo 开发环境与 Expo 集成,这意味着您可以直接在浏览器中创建、运行和预览 React Native 应用程序。
在本章中,我们将探讨如何利用 Bolt 的 Expo 集成从头开始创建移动应用程序。我们将逐步构建一个基于位置的天气应用程序,并在此过程中介绍特定于移动设备的功能,如访问设备位置、摄像头和通知;使用 React Native 创建样式;以及在设备上进行测试。然后,我们将尝试将现有的 Grocery List 网络应用程序转换到移动设备。与您看到的其他集成一样,Bolt 会处理项目设置、原生模块安装,甚至根据您的提示打包应用程序以进行部署。Bolt 的 Web IDE 可以让你检查日志和错误,你还可以直接在 Bolt 中使用 React Native 的调试技术(比如记录到控制台)。
设置
你需要一部安装了 Expo Go 应用程序的智能手机。它可在 iOS App Store 和 Google Play 上下载。
登录设备上的 Expo账户对开发很有帮助,但并非严格要求。使用 Expo 和 Bolt开发不需要 Xcode 或 Android Studio,但如果最终要发布应用程序,则需要苹果开发者账户(iOS)和/或 Google Play 开发者账户(Android)。现在,我们将专注于开发和测试。
要启动 Bolt + Expo 项目,您可以选择 Bolt 主页上的 Expo 启动模板,或者直接提示 Bolt。它将初始化一个 React Native 项目,并在项目引擎盖下安装 Expo,然后根据您的描述实现功能。项目初始化后,你通常会看到一个名为App.js或App.tsx 的文件,以及一些运行默认应用程序的初始代码。在这里,你可以开始指导 Bolt 构建你想要的功能。
让我们建立一个实际的例子:一个我们称之为 LocalWeather 的天气应用程序,它可以显示用户所在位置的当前天气。本示例将演示如何使用 Bolt 提示构建一个应用程序,该应用程序使用一种设备功能(地理位置)并调用外部 API(天气服务)。
初始提示和定位服务
首先告诉 Bolt 您想构建什么:
创建一个新 Expo React Native 应用程序,名为 "LocalWeather"。它应该询问用户的位置,然后显示该位置的当前天气。
当您提供此提示时,Bolt 将:
-
初始化一个新的 Expo 应用程序,生成文件,包括package.json和App.tsx。
-
安装必要的Expo 软件包;在本例中,为了定位服务,Bolt 应安装expo-location软件包,它是 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access