使用 React Native、GraphQL 和 TypeScript 构建新闻应用程序

Build a News App with React Native, GraphQL and TypeScript

当您开发 React Native 应用程序时，很容易忘记用户体验它的不同方式和条件。

例如，当没有互联网连接时会发生什么？

如果你还没有问过自己这个问题，那么答案就是……绝对没有。

当您的用户四处点击时，他们会被旋转器和加载页面阻止。他们没有收到任何错误，所以他们坐在那里，等待……

除非他们关闭并删除您的应用程序，否则永远不会再打开它，因为它已损坏。

但您的应用程序并没有损坏，您只需要为互联网出现故障时制定一个计划即可。

这不仅仅是网络连接打开或关闭的问题，实际上存在三个级别的离线支持：

• 仅在离线时显示错误
• 只读离线支持
• 稍后同步离线支持

课程项目

您将逐步构建一个新闻应用程序，显示故事列表、故事页面和书签页面。

开始时，您将学习如何使用 GraphQL 查询应用程序的数据，以及如何在需要数据的组件中导入和调用这些查询。

这个项目也使用了 TypeScript，但它的使用方式相当独特。您将看到我们如何在应用程序中拥有 TypeScript 的安全性，而无需自己编写任何类型。使用为应用程序提供数据的 GraphQL 架构，您将通过代码生成几乎免费地生成 TypeScript 类型。

在本课程结束时，您将学习如何实现前两个级别的离线支持，并了解如何实现此后的最后一个级别。

您将学到的技能

• 获取并使用 GraphQL 数据
• 基于 GraphQL 模式生成类型
• 在 React Native 中添加导航
• 无网络连接时显示错误
• 缓存数据以便在 React Native 应用程序中离线查看

开始使用：

这些视频是使用普通 React Native 在配有 iPhone 13 模拟器的 Mac 上录制的，但您可以使用 Android、Windows 甚至 Expo 管理的工作流程来完成本课程。有关特定于平台的说明，请参阅课程描述。该解决方案存储库已被验证可在 Mac 上的 Pixel 3a 模拟器上运行。

本课程的完整应用程序可 在此处获取 ，每节课都将包含一个指向添加代码的提交的链接，以便您可以检查您的工作。

本课程将要求您在设备上本地运行 API。API 存储库可 在此处获取。

课程中使用的更多资源：

• urql
• Insomnia
• Async Storage
• React Native Netinfo

下一步是什么

完成本课程后，您将能够将这种离线优先模式应用到您正在构建的任何应用程序中。

如果您想深入了解如何构建 React Native 应用程序，您可以跟随 Chris Achard 构建一个 Restaurant Review 应用程序。这将是在另一种情况下实施离线支持的绝佳机会。

→从头到尾构建适用于 iOS 和 Android 的 React Native 应用程序

以为本机应用程序构建优质用户体验为主题，Kadi 制作了一门课程，教您如何实现骨架加载器（而不是仅显示旋转器）。您将了解如何显示要向用户展示的内容的静态版本。