The Ultimate React Native Course | Build Your First Mobile App in 2025

0:00 所以你可能不相信，但这是 我们实际使用的移动应用程序 打算用 React Native 来构建 一个教程就可以同时在 模拟器和你的 IOS 和 Android 此应用程序中的设备一切 实时工作，例如当 有人点赞了所有用户都能看到的帖子 立即更新，并且您 刚刚见证的是片尾的一个片段 在本教程中，我们测试了我们的 整个申请过程中你 了解 React 可以用来构建 此移动应用程序感谢 React 在本视频中，我假设你 没有移动使用经验 开发和反应原生所以 基本上我会从零开始

0:45 我会教你99%的东西 你需要构建一个真实的世界 移动应用程序，特别是 使用 react native 和 Expo 所以让我 给你一个完整的 最终结果，然后我们再讨论 文本堆栈以及您将从中学到什么 这个视频所以这是一个社交媒体 名为 Spotlight 的应用程序 它有七个不同的屏幕，分别是 身份验证主页书签帖子 创建通知我们自己的个人资料 以及其他用户的个人资料 一切始于 身份验证屏幕我们有 Google 已实施有效的身份验证 一旦我们登录，我们将 导航到主屏幕，我们 有故事和帖子我们可以喜欢帖子

1:33 添加评论并添加书签我们可以 查看我们过去的所有书签 屏幕，如果我们是 帖子我们可以删除它们 创建屏幕我们可以选择一个图像 从我们的设备添加标题并分享 每个人都会有三个 通知类型如下 关注并评论我们将能够 查看帖子详情以及 在个人资料屏幕中评论 M 本身 我们可以看到我们的统计数据和帖子，我们 可以用这个编辑我们自己的个人资料 非常酷的滑动动画模型 从屏幕底部进入 可以访问其他用户的个人资料， 可以关注或取消关注他们， 主页我们将刷新

2:18 功能以及注销按钮 这将引导我们回到 身份验证，所以这是整个 我们将要构建的应用程序 今天，正如你所看到的，有很多 在本教程中介绍 将学习如何使用每一个基本 React 中你应该知道的组件 原生如查看文本图像链接 滚动查看平面列表，其余的都在 在所有这些之上的屏幕上，你将会 了解特殊文件和文件夹 喜欢应用程序标签和布局，你会 学习一些你 在移动开发中应该知道这些 作为启动画面安全区域视图选项卡和 构建此文件时堆叠导航器 我们将要讨论的应用程序 的表现，我们将看看如何

3:05 改进它，我们将学习 如何使用我们自己的手机 我们甚至会 更改默认应用程序图标，我 将提供一些额外的 你应该记住的资源 在构建你的下一款手机时 现在使用 React Native 的应用程序 最重要的问题是你真的 需要一台 MacBook 才能关注 除此以外，这个视频绝对没有任何 连接到互联网的笔记本电脑 应该没问题，这都要归功于 Expo 是一个框架和一个平台 这是建立在 React Native 之上的 稍后会详细讨论 视频，但基本上它允许我们 扫描二维码并测试 当我们的物理设备上的应用程序

3:50 如果你 了解 React 的基础知识，你应该 能够从头到尾跟进 没有任何问题，我们的文本标签将 与 Expo convex 一起为我们的 整个后端和职员 一路上的身份验证 学习一些非常有趣的概念 在采访中谈论 总的来说，这是教程 我希望我刚开始的时候就有 使用 React Native，我说的是 现在我可以说出我的心声了 关于本教程接下来的 20 几分钟，但我想我还是把它留着吧 在我们之前，我们在里面等你 如果你愿意的话，进入视频视频 喜欢支持我的工作我有一个 udmi 课程内容超过 100 小时

4:36 以最便宜的价格 只需一次性付款 终身访问你可以找到 折扣链接在描述和 该项目的源代码和未来 你可以观看项目 整个教程都在 UD 中 没有任何广告，感谢您的观看 让我们开始之前 编写任何代码我已经准备了一些 我们可以看一下 一旦我们完成了，我们就会继续 并真正开始编码，你可以得到 这些注释来自 描述它将完全免费 目前它是私密的，但是 你正在看这个视频，它会 公开，所以我们从 问题什么是 React Native 首先，它是一个框架

5:22 允许您构建移动应用程序 使用 React 你可以使用 JavaScript 或 typescript 以及此视频 我们将使用 TypeScript，所以总的来说 它是一个框架，允许你 构建移动应用程序仍然使用 反应，并且有一个非常常见的 关键字或术语称为跨平台 开发意味着编写代码 Once 可以在多个平台上运行 这正是 React Native 允许我们这样做，它是一个跨平台 框架，因为我们可以编写一个 Java 脚本中的代码库，我们可以 现在将其部署到 IOS 和 Android 这真的很方便又漂亮 与之前相比，很酷

6:09 过去的日子所以只要想一想 如果你回到过去 想要开发一款移动应用程序 实际上必须建造两次 iOS 一个用于 App Store 右边，一个用于 适用于 Android 的 Play 商店，你 必须学习两种不同的编程 你必须学习适合 iOS 的语言 Swift 和 Android 你必须学习 苏格兰和斯威夫特之前 介绍你必须使用 Objective C 这比 Swift 难多了 在 Cin 之前你必须学习 Java 就像有 仍然有一些缺点，比如

6:54 你必须学会​​的苹果开发 必须有一台漂亮的 Macbook 价格昂贵，对于 Android 你 必须学习 Android SDK 及其 框架，所以它真的是一个 复杂的过程，如果你是一个 公司创始人，这意味着你需要 雇用两个不同的团队，正确的是 构建 iOS 应用程序和 另一个是建立精确的 相同的应用程序，但适用于 Android，因此 确实是一个混乱的过程，但多亏了 React Native 我们只需编写一个代码 然后我们可以将其部署到 IOS 和 Android 都有，所以我希望 给你更多见解 进入 React Native 但是嘿 React Native 本身是不够的，这是一个

7:41 我从 文档，所以如果你访问 reactnative dodev 并开始使用 你会看到他们告诉 我们相信最好的方法 体验 React Native 是通过 框架，他们的建议是 博览会上，这就是将要使用的 视频也是如此，所以它就像一个工具箱 拥有所有必要的 API， 帮助您构建生产就绪 应用程序好的所以现在我们知道 React Native 还不够，我们需要 使用像 Expo 这样的框架 成为我们使用时的 goto 框架 反应原生，但请不要 混淆 React Native 和 Expo 不是 就像世博会建立在同样的基础上

8:27 当你 使用 expo 构建应用程序 一天结束时你仍在写作 React Native，但它还有更多 优化，你 获得很多其他工具 需要并且喜欢它很漂亮 方便，所以你可以把它想象成 React 和 NextJS 在 Web 开发中的作用 您正在使用 你实际上仍在编写 nextjs 反应代码，但在此之上你有 一些功能类似于服务器操作 嗯，API 路由就是这样的 服务器组件等等 这和我们的情况完全一样 现在就在这里，让我们 看看我们所做的一些比较

9:13 在 react 和 react native 之间所以我有 准备这份清单是为了向你证明 React Native 实际上并没有什么不同 就像名字所暗示的那样 仍然有反应，但只是有点多 概念和语法差异 让我们来看看这个列表 很快这件事的重点 只是为了让你知道只是为了 给你一些想法，所以在 React Web 中如果 你想构建一个组件 会使用像 ative H1 ptag 这样的东西 如果你想给 有些样式可以使用类名 字段正确，在 React Native 中它是 实际上并没有那么不同 使用您将使用 View 和任何 你可以想象的文字，比如 H1 H6

10:01 ptag H3 旋转任何你会使用的文本 所以你可以将整个文本包装在 来自的文本组件 反应原生好吧我希望这能使 感觉我们实际上没有类名 相反，我们会使用 style 这是我们要做的 在 React Uh Web 中进行下一步样式设置 你需要给出一个班级名称，然后你 呃，假设你会准备 您的 CSS 文件中的这些类， 会给我们一个像 卡片和个人资料图像类以及这些 是它的风格 然后当谈到反应时 本地我们实际上得到了 来自 React 的名为 stylesheet 的组件

10:48 原生的，在这里我们创建我们的样式 我们有卡片，有这些样式和 然后是个人资料图片，下面是 风格 我们说风格。卡，这意味着 这个视图将获得所有这些样式 你在这里看到的就像 CSS injs 好的，我们将会看到这些 在视频后面也出现了 React Web 中的事件处理 我们在点击鼠标方面取得的进展 等等等等，几乎 同样的事情在 React Native 中发生，但是 不再是点击，而是按下 因为正如你可以想象的那样，这是一个 手机呃名字 呃，名字一按就有意义 长按双击类似的东西

11:36 没错，而不是按钮 组件我们有可触摸的东西 不透明度或可按压这些是 我们稍后会看到的组件 在 视频好吧让我们加快一点 在 React Web 开发中有列表，例如 我们做物品。我们要为每个项目绘制地图 返回一些东西所以真的很相似 我们这里所拥有的，而是 组件称为平面列表，这里我们 说这是我们想要的数据 映射并渲染每个项目 这个函数所以我们基本上得到了 对于每一件物品，我们都会 想退回这部分它可能看起来 很复杂，但实际上很漂亮

12:22 我们将在 传入部分然后我们有表格所以 我们可以不使用输入元素 使用文本输入之类的东西 我们可以使用 onsubmit 按下 按钮好吧我希望这能给你一个 对你的反应更有信心 本土之旅吧这真的不是 这与反应不同，所以 考虑到这一点我有一个空文件夹让 我继续打开它 桌面好的我们开始吧实际上我有 我已经在我的上创建了一个空文件夹 桌面我将其称为 Spotlight 你可以随便叫这个应用程序，只需打开 然后我们想在 vs code 中

13:09 打开我们的终端并开始博览会 应用程序所以这是命令 您可以在以下位置输入 npx create D Expo app 最新的，我想初始化 这个在当前文件夹下，所以我会去 继续，然后把点放在 结束，让我给你展示实际的 我从中得到这个的文档，所以如果 您参观世博会。开发人员创建 文档这是快速入门 你可以得到命令，好的，我们走吧 向前奔跑 这可能会问你一个问题 按“为什么”，然后按 在你的第一个 时间可能会问你，因为这是

13:55 这不是我第一次没有得到 这个问题，让我们等待它 完成，在下一节中我们将 讨论一下这段代码 基础好，安装刚刚完成 在我的终端上完成我可以看到它 说你的项目已经准备好了，我们会 喜欢开始，所以我会清理一下 我的终端，在我们开始之前 我想提一下 我们有很多不同的文件，例如 钩子组件常量等等我们 真的要删除它们 将从头开始，因为我可以 想象一下这可能看起来真的真的 对于初学者来说很复杂，但正如我所说 我们实际上将重置这个项目 第二，但首先我需要提一下

14:41 你想跟着这个视频一起看 目前您有两种不同的选择 所以你可以安装 expoo 应用于你的实际身体 手机，以便您可以访问应用商店，如果 如果你正在使用 iPhone，或者你有一个 Android 设备上您可以访问 Google Play 商店并获取 xoo 应用程序，然后通过使用这个我们 可以测试我们的应用程序，或者您可以 如果你使用的是 Windows，请使用模拟器 你会得到 Android Studio，如果你 在 Mac 上你现在会得到 X 代码 既然我在教你们，我就必须 在屏幕上显示这个模拟器，这样我 可以测试一下，向你展示结局 实时结果我将使用

15:28 相似的 但如果你问我，这远不止 更难进入，为什么是 只是因为需要更长的时间 安装任何这些呃模拟器都会 超过 10 GB，但如果你安装 在你的手机上 xoo 只需不到 1 分钟，你刚好能看到结尾 在你的实际手机上 看看我们如何启动我们的应用程序 我们的 所以我只需访问 vs code 并 我会说 MPX Expo，然后运行这个 命令好的所以如果你使用你的 你需要扫描此二维码的实体手机 在您的实际终端中编写代码，然后您 需要连接到相同的 Wi-Fi

16:15 你的电脑和手机应该 连接到同一个 Wi-Fi 好吗 那么，因为我是，因为我将要 在 iOS 模拟器中运行这个 如果你使用的是 Windows，只需按“I” 可以按 a，然后你就会有 Android 模拟器启动并运行，所以我 可以意识到就像我知道我们要去 真的很慢，但我只需要 确保每个人都在同一页面上 所以我只需按我希望这会 继续启动 Expo 应用程序 这个模拟器，我们开始吧 我们得到的样板应用程序 来自世博会团队，所以这就是他们 给我们这是代码库和这个 是 op put，让我把它们放进去

17:01 像这样并肩而立，现在好了 这里说进入应用程序标签索引。 TSX so app 标签索引。 TSX 如果您更新 所有这些部分，让我们说欢迎 1 2 3 如果我保存它，它应该重新启动 如果没有实时，你可以去这里 在你的终端上按 R 这意味着 重新加载，它应该重新加载 最新版本，你甚至可以运行这个 在你的浏览器中，所以我只需按 W 代表网络浏览器，这是 实际应用权你可以 为网络构建它，但在我们的例子中，我们 不太感兴趣 没关系，但请记住

17:47 事实上它实际上是 可能吧，我希望我们明白了 现在我们要重置这个 整个项目，但我只是想谈谈 关于一个叫标签导航器的概念 顾名思义，你可以得到一个 基于这些标签的导航 我们现在在探索屏幕，我们 在主屏幕上，这是 感谢这个标签文件夹 这是 Expo 内置的，所以这些是 我们要讨论的事情 稍后我会在视频中详细介绍，但我只是 因为我们有它，所以想提一下 现在我就可以打开我的终端了 使用命令 C 终止它让我们清除 我们希望重置它

18:35 项目所以他们准备了重置 对于我们来说，项目脚本基本上可以 说 npm run reset Das project 并运行 所以这里说你想搬家吗 现有文件放入应用程序示例中 删除它们，所以我们就说 是的，运行这个 让我稍微修改一下这个屏幕 更大，好的，所以你可以看出 我们以前拥有的一切 已移至此应用示例文件夹 因为我们真的不想 我们将要使用的任何样板代码 从头开始我们基本上可以 继续并删除整个文件夹 真的不需要，我们只需要 从空的应用程序文件夹开始

19:23 除此之外，我们还拥有如下配置 以及一些资产，例如字体和 图片好的，就这样吧 接下来我们可以得到重置项目 始于 好了，这就是我们 现在我们要开始 React Native 的基础知识，我会尝试 接下来的一小时要走得很慢 直到我们理解一切，然后我们 如果 如果你觉得我们进展缓慢，你可以 从设置中加快视频速度 就像视频设置一样，现在可以了 IID 想启动这个应用程序我会 打开我的终端，我会说 如果你在 Windows 上，请清除它

20:08 可以说 CLS 或 clear，如果你 在 Mac 上你可以说命令 K， 把这个弄清楚，现在我们说 MPX 博览会我们可以运行我们的新应用程序 这是我们之前所拥有的，所以我只是 按 R 这应该 重新加载，我们现在去访问 应用程序索引。 TSX 是我们的主屏幕 所以它说编辑这个让我们编辑它 我只需添加 1 2 3 让我们保存 我们可以看到 现在让我们来谈谈基本 组件正确的基本组件所以在这里 如果你想的话，我们有一条短信 文本组件之外的文本 你会得到错误，所以这里

20:55 说你拥有的任何文本都应该消失 就像在文本组件内部一样，所以我们 可以说你好，我们走了，这是 来自 React Native，在这里我们可以 给出一些你可以告诉我的风格 就像删除一样 好的，所以风格将采取一个对象 使用任何你可以使用的字段 认为这是来自 CSS 所以这里 我们说 Flex 一个对齐内容和 将项目居中对齐，以便 将其置于屏幕中央 但现在如果你能想象我们可能有 一堆不同的 CSS 样式和 这会失控，所以 另一种解决方案，而不是全部

21:40 这些，我称之为 风格还可以。容器和 Styles 是从哪里来的 基本上我们可以说 const Styles 和 进口 样式表样式 床单。现在创建这个样式表应该 来自 React [音乐] 就像那样的本地人，我们可以说 [音乐] 创建这个将需要一个对象，这里 我们可以添加容器 类，所以就像以前一样我们可以添加 这些样式，所以我们有 Flex 一个对齐

22:26 中心项目 并证明内容 中心好的现在我们可以看到这是很多 更具可读性，我们只能说是风格。 容器里我们可以有一个文本， 比如说，你可以这样称呼它 顺便说一句，这样就可以了 你好，但这应该说得通，我只是 说颜色应该是红色，说风格 风格。瓷砖现在会变成红色 你可以说字体大小会是我不 知道，比如说 50 好的，所以它只会在现实中更新 现在是时候了，我们可以说 你有 200 行 CSS 代码，你可以

23:12 基本上创建一个文件夹 风格，假设我们将有 身份验证页面的样式 只能说誓言。风格。 JS 现在这个 部分不是扩展，这只是 我想使用的 con iion，这样你就可以 即使有这个.js，它也是一个常规 JavaScript 文件，这也是 常规的 Javascript 文件，但正如我所说 这是我想要的惯例 使用所以我将继续创建这个 文件让我剪切这个粘贴进去然后我 想要导出这个常数 导入样式表立即保存此文件 我们可以从该文件中获取这些样式

23:57 让我们删除这个我会说 从 Styles 导入样式 好吧也许我们应该再上一个 那么我们有 o 样式，所以它是 仍在工作，但正如你所告诉我们的 代码库更加干净， 组织起来，实际上我们将 有很多不同的样式文件，例如 稍后将出现一堆这样的文件 视频好的，我们已经讨论了 查看文本现在我们可以有类似的东西 可触摸 不透明度嗯好吧就像这样我是一个 打字很慢，但我们只是 看看我们导入这个我们真的不 有可触摸的实际上让我们删除

24:44 我们在印刷机上拥有可触摸的不透明度 这么说吧 警觉触及 好吧，这么说吧 你触摸了这里我们可以添加文本 假设你按我，好吗 你按下这里我们就可以看到我们只是 收到警报，就像我们 可按压 组件也来自 React 本地的，这里我们有 将鼠标悬停在 BL 上，你随时可以 进入这些组件按下 控制空间你真的可以得到所有的 他们拥有的道具也是如此 我们可以复制它 粘贴

25:30 比如说按 我 可按压，所以它正在工作 同样的方式，但显然他们有一些 差异呃我们将会谈论 稍后视频中会提到他们，但只是 知道可触摸的不透明度给你 这种不透明度反馈开箱即用 你能看到吗，就像我会删除它一样 一旦我点击它就像 其次，我们有这个 aacd 反馈， 这就是你可能想要使用它的原因 大多数时候，这实际上是 比更简单的组件 pressible 好的那么我们可以像 假设我们要得到一个 图像组件可以是

26:15 目前来自 React Native 或 Expo 让我们使用来自 反应原生，在这里我们可以有一个 来源和这里如果图像 来自本地文件 假设我们要得到这个 icon.png 那么你需要它 因为它是本地图像，所以让我 我会说，杀掉左边 要求并给出确切的 路径所以我认为这是不正确的 路径，所以我们应该往上走 资产 图片 嗯，我们有 logo.png 吗，没有 实际上没有徽标.png 但是我们有 icon.png 我们可以得到这个

27:03 我们可以在其上添加一些样式，例如 宽度设为 200，高度设为 [音乐] 好吧，出于某种原因它没有 刷新它我就说R好不 没好，所以我刚刚找到了 我认为解决方案不是宽度和 我们应该采用这种款式的高度 WID 和高度现在正在工作 预期，如果图像来自 一个远程网络，假设我们 将从 unsplash 获取图像，因此 让我们抓住这个图片地址呃复制 图片地址我们回到VS Code 在这种情况下，你想

27:49 实际上使用一个叫做 URI 的字段，并且 你粘贴它它应该可以工作 让我们看看为什么这不起作用也许我们 应该添加一些 Styles 表示宽度将再次成为 200 好的，现在它正在工作，如果你 从远程网络获取图像 比如 unsplash 或者我不知道任何地方 它应该有这个 URI 字段，但如果它 是本地图像，您应该需要它 来自类似来自相对路径 好的，我希望这能使 所以这些是基本的 我们刚刚探索过的组件 但在这些之上还有一个文件

28:34 称为下划线布局。 TSX 这是一个 我们应该保留的实际特殊文件 我们可以创建多个布局 文件在不同的地方，所以目前 这给了我们堆栈导航器 这是我们接下来要讨论的 第二个，这里是索引。 TSX 文件是 也是一种惯例，所以对于你的 不同路线的主页 称它为索引，所以 而不是把这里称为家。多伦多证券交易所 只说索引。 TSX，如果你有 不同的路线入口文件 现在成为索引我知道这听起来可能 很复杂，但我们会看到 几个不同的例子和

29:20 进入此应用程序文件夹的所有内容 将成为一个屏幕，所以在我们的 应用程序我们将会有很多 不同屏幕 像个人资料屏幕通知屏幕 创建帖子屏幕主屏幕等等 等等，我们将把所有的 将它们放入此文件夹中现在我们已经讨论过了 关于堆栈导航器，嗯，怎么样 这样做有效吗？让我们继续创建 我将拥有几个不同的文件 一个 轮廓。 TSX 和我正在使用扩展 让我展示一下 它被称为 es7 react reactnative 代码片段如果你 得到这个你应该能够做到这一点

30:07 捷径 rnf 它会给你一个功能性的反应 原生组件，所以我们假设这是 轮廓 屏幕，我们可以将其大写 一个，然后我们再看另一个屏幕 称为通知。 我们实际上使用的是 GSX 或 TSX typescript 我会再说 rnf 和 这么说吧 通知 我现在将从 主页我会链接这个所以我会说 链接这是这里的另一个组件我 只需从 Expo router 获取，我就会 说访问

30:54 通知 屏幕，假设 h ra 会带我们 到/通知，正如你所告诉的 是开箱即用的保存类型让我们保存 从主页我们可以访问 通知屏幕我会点击它好的 它说没有溃败P我认为我们应该 现在用 r 重新启动它，我会尝试 把它收集起来，我们现在就去，只要你能 告诉新的屏幕来自 右手边右边这就是堆栈 导航器允许拥有，如果你去 现在回过头来注意这个屏幕将如何运行 从左到 好的，新的屏幕即将推出 从右边，如果你想回去

31:40 它们会被弹出，这是 Navigator 允许我们进行哪些性行为 那么如果我们愿意的话我们可以这样做 就像呃不是自己Clos标签我要去 说，在这里我们可以添加不同的 屏幕所以我只会说堆栈。屏幕 我们称之为主页 索引我们实际上可以隐藏标题，所以 如果您现在保存它，标题就会消失 对的，你可以把它带回来 我们就说带上我们可以的标题 更改此名称以便我们可以说标题 将会回家，因为这是我们的实际 主页或者我们可以将其称为 feed，如果

32:26 这是一个社交媒体应用程序， 我们可以访问通知页面 而不是将其小写 实际上也可以改变它 这里我们说进入通知 屏幕并使标题成为 通知，所以这里我们只需大写 最后让我们保存一下现在 这里有一个问题，比如说 这里我先说一下标题 显示将会 错误，你会看到 内容溢出此状态栏 我们已经在顶部，如果我们想要 我们可以始终考虑到这一点 只需用某物包裹它即可

33:13 打电话给保存区域提供商，所以我会去 这里我只想说保存区域提供商 组件并用它包装所有内容 那么我们希望有保存区域 视图组件，假设将其导入为 好吧，用它包裹一切，现在如果 我们给它一些造型，比如说呃 不是类名，而是样式 Flex 将会是其中之一，因此 将占据整个屏幕，在这里我们 现在去，它在视图里面，但它不在 状态栏溢出，所以这 你也应该保留 就像你可以改变 背景等等，这是一个 绝对重要的组成部分，你

33:58 应该记住，我们将使用 这实际上是在视频后面，所以 现在我们应该怎么做我们应该怎么做 我们正在做的就是在我们的 应用程序我们将会有很多 不同的屏幕，我们 将会有导航标签，所以我们将 有主屏幕书签创建 通知以及个人资料 屏幕，现在让我们尝试创建这个 我将 进入我的 vs 代码，如果你还记得的话 我们有一个名为 tabs 的特殊文件夹，所以 我先把括号打开 只需在中间添加标签名称即可

34:44 这是世博会将 看看是否能够实现 标签 导航器在这里我会放一个特殊的文件 再次成为我们的 布局。 TSX 文件，然后我们可以把我们的 标签，这样我们就可以拥有个人资料 我只需将其拖放即可 这 通知，所以我们将 假设我们有什么 看起来，我们要创造和 书签以及主页 屏幕，所以我们试着慢慢来 我们将有 创造。 TSX，我们可以说 rnf 得到 这个样板代码 代码，这里我们还会添加书签

35:32 让我们 [音乐] 说好的现在让我们保存所有这些我 认为我们也可以把主页 其中将被称为索引 好吧，假设保存 现在我们实际上没有索引 在根级别，这样我们就可以继续 只需在这里添加一个索引文件，我就会 说索引。 TSX 假设 RNF 可以 是我们的起点和所有这些文件 将执行的操作是将用户重定向到 提要是这个文件，所以我知道 这可能看起来很复杂，但我 保证这将有意义 第二，假设从这里开始

36:19 我们的用户到标签页，好的，这将带我们 到入口 点，所以再一次这将是有意义的 等一下，让我们尝试一下 实际上把这些颜色以及 将这些图标放入我们的标签导航器中 为此，我们将访问 VS Code 在布局下，我们假设 rnf 可以将其称为标签 布局你可以随便叫这个但是我 觉得这很有道理，让我们缩小 左侧，而不是 查看我们将要获取的标签 来自 X 路由器的组件，我们将 给每个标签页屏幕，这样就可以 就像在这个标签导航器中我们会说

37:04 标签。屏幕，我们将把我们的 所以我们首先需要的是 每个屏幕都是名称和 首先我们要有一个索引点 这将是主页 这是我们接下来要使用的起始页 我们将添加五个标签 尝试把那些我会复制一个 2 2 3 四和五 假设我们 将会有 我们将要拥有的书签 创造我们可以拥有 通知，我想我们会 有个人资料也许就像 1 2 3 4 好的，应该够了，我们有五个 出于某种原因，我放了六个屏幕，但是

37:51 好了，让我们保存并尝试查看 在行动中我们有什么我可以 只需按下 R 就可以了，我们得到五个 不同的标签，但现在它们并没有真正 有一个图标，而且我也没有 想在底部看到这个名字 我们只想看到这个的图标 我们可以在这里更改我们的选项 标签让我说嗯屏幕 选项将接受一个对象 所以在这里我只想说 酒吧展示标签，我只会保存错误 如果你保存它应该摆脱那些 名字，让我们尝试改变图标

38:39 对于每个 Tab 屏幕，因此对于 主页我们会说选项我们只是 去拿一个物体，我们只需要 说标签栏图标，这将是 采取回调函数，就像 这而不是返回文本我们 想要返回一个图标，这是 将会是一个自闭合标签，就像 假设我们要得到离子 图标，比如说离子图标 原因这不能够完成 让我尝试从 Expo Vector 获取它 图标，因此 xook 会为您提供不同的图标 开箱即用，并且 图标我们会得到家让我们 保存在这里我们可以看到它刚刚

39:25 已更新，但是它非常小，我们可以去 提前改变尺寸以及 颜色，所以我们就取其大小 是默认大小以及 默认 颜色，所以让我缩小，这样 你可以看到整条线，我们 它有点大，而且它有 这个蓝色如果你删除它 会是黑色的，所以它不会真正 实际主题默认是蓝色 但我们要改变颜色 好的，我们同样要 添加几个不同的图标，所以这里 让我告诉你这些的名字 图标，这样你就可以暂停视频 也许可以尝试自己添加

40:12 书签图标名称是 创建的书签是 ADD 然后圈出通知 心脏和个人资料是人 圈出好的，所以一旦你完成了这个 让我们看看我的解决方案 基本上复制粘贴，不要浪费 时间是完全相同的事情 对于 创建让我得到这个，让我们 实际上保存在那里我们去它只是 已更新，您知道它 集中颜色会改变，好吗 我们想要得到这个，但是 现在我在这里使用了一些颜色 称为原色，它将

40:58 是这种绿色，所以我们继续吧 并在文件夹下创建此颜色 称为 [音乐] 常数，我就会有这个主题。 TS 您可以从 源代码让我尝试提供这个 对你来说，这大约是 10 行代码 有原色和次色 背景等等，我有 已经准备好了，所以一旦你得到 我们可以导入这些颜色并使用 这个图标的主要颜色 那么我们想做什么 现在让我们获取通知

41:45 好吧好吧 然后针对配置文件，因为 这和我不知道的完全一样 真的想把这个打出来，但我们不想 真的需要浪费五分钟 这些现在基本上我们只是 用这个离子回拨 图标正确好吧一切似乎 对我来说是正确的，但是为什么这是蓝色的， 这是绿色的，我们继续改变吧 每个图标的总体颜色是 将在屏幕选项下 父级中的实际选项卡组件 首先我现在不知道 真的很想看看标签，所以我会去 继续并添加此标题 false 让我们保存刚刚消失的标签

42:32 这里我们仍然看到标签，但它即将到来 从堆栈导航器，我们可以 继续说，嗯，比如说 风格呃基本上我就买这个 部分让我们说风格这是某事 我们之前已经做过了，我们只需 说标题显示为 假的，好吧，为什么没有工作，我想我们 可以删除那些 嗯 等等，让我们让它看起来像 这个好吧所以我错了而不是风格 应该是屏幕选项，因为我们 在父组件中，所以时不时 我也会犯错，但让我们 忽略事实，我只会保存在那里 那个标签现在也消失了，我们会

43:20 继续吧，我们想添加一些 其他风格，所以我们想改变 颜色正确，我们可以 获取标签栏上的主要颜色 活跃的色调颜色所以如果你保存它 处于活动状态，我们将得到这个 原色，我们可以改变 非活动颜色也是如此 让我们保存它只是改变了 如果你能看到，那么我们可以添加 现在你可能会问标签栏样式 嘿，我该如何学好这些道具 基本上，当你构建时你需要它们 你将会看到更多项目 越来越理解这一切 这也是我之前做的

44:06 录制这些视频我只是继续 对大多数事情都有经验， 最常见的东西是 文档，这些就是其中之一 我已经建造的东西，所以 请不要不知所措，你可能会 问问嘿有数百万 我如何学习每一件事 他们技术上如此，诚实 你真的不需要学习 99% 的 他们只关心你真正 需要，在我们的例子中，标签栏样式是 其中之一所以我会从我的 注释并粘贴，而不是键入 我可以解释每一行 这是标签栏样式 我们正在更新让我保存一下好吗我们

44:51 刚刚改变了背景颜色 只需将其设为黑色，我们就可以将其设为顶部 条形边框顶部宽度为零 位置将是绝对海拔 零，你可能会问 哎呀，海拔高度你读不懂 基本上是针对 Android 和我已经测试过了 海拔零度看起来好多了 为什么我只是忽略了这一点 高度是 40 你可以把它做成 80 就像加倍你可以看到变化 但我认为 40 与我们相当 我们给八个底部的一些抚摸 好的，这些是我们的风格 只是 现在我们来做剩下的

45:37 我们的申请是盈利的 背景颜色，但我们只会得到 现在一步一步地做我想做的事情 基本上杀死所有这些并采取 步骤就像花一点时间尝试 了解到底发生了什么 我们的应用程序所以一切开始 从布局中的应用程序文件夹。多伦多证券交易所 这是第一个运行的文件 所以这里我们包装整个应用程序 拥有安全区域提供商和安全区域 查看组件，以便我们的 com 我们的内容始终处于安全区域 它没有溢出状态 在索引页中我们

46:25 基本上会立即将用户带到 我们的标签文件夹，特别是 主页右边这是我们的主页 假设这是信息流屏幕 在 标签没问题，所以每当你重新加载你的 默认申请你的IND 页面，从这里开始，我们设置了它 我们可以进入书签 对了，它会打开这个文件，然后 渲染它然后我们就可以进入创建 通知和个人资料屏幕所以我 希望这是有意义的，我们将 修复我们要做的样式 它实际上看起来好多了，但是这个 这是我们应用程序的总体思路 好的，所以我们有标签，代表

47:12 标签导航器，它位于 标签文件夹这是一个特殊的文件夹 世博会为您提供从这里开始 可以改变每个 Tab，具体来说你可以这样做 更改图标的选项等等 所以 所以这就是我们所做的 在我们继续之前 下一节我们继续删除这些 导入并更改背景颜色 我们的整个应用程序 在这里的布局下，我只需要 说背景 颜色将为黑色，并且应该更新 它和这里的反应原生的另一个 还支持颜色格式，因此您

47:59 你可以说像黑色，或者你可以说十六进制 代码正确 FFF 你应该保存它并且它 应该像我们做的那样 CCC 就像它应该工作你得到 点和 rgba 也有效，我认为 hsl 可以工作，但在我们的例子中，我只会 我将使用这种简单的黑色 如果你真的需要的话我们可以把它写得更短一些 想要我们将与 0 0 0 这是 同样的事情，我们有 颜色也很好，在视频后面 我们只需看看如何改变 每个屏幕的背景颜色 下节再见 好的，这就是我们现在离开的地方 是时候实施身份验证了 并将我们的应用程序连接到

48:45 数据库，为此我们将使用 店员和凸你可以找到链接 在描述中，让我们继续 拜访办事员实施 首先进行身份验证，现在我在 如果你还没有 听说过这是最全面的 用户管理平台，并在此 我们将用它来处理 整个身份验证流程 我们的应用程序完全安全， 一些生产级应用程序和 公司实际上正在使用它，所以 很酷，而且真的很便宜 开始使用它吧，它是免费的 最多可供 10,000 名用户使用 完全免费，也许你会 从来没有达到过这么多的用户，所以让我们

49:31 继续吧，开始吧，我 我已经有一个帐户了，所以我直接去 继续访问我的仪表板，让我 尝试快速登录 现在我们想 创建一个应用程序，比如说创建 我将这个应用程序称为 Spotlight 这是我想使用的名字 你可以随便叫这个， 禁用除以下之外的任何其他提供程序 如果你真的想，你可以谷歌 就像你一样 可以有所有这些其他呃提供商 但就我而言，我只会使用谷歌 因为这是我们唯一能做的 需要创建 应用程序，我们有一堆

50:17 在我们的案例中，不同的 SDK 和指南 我们想在 Expo 上使用它，所以我会 选择这个，让我们来看看这些 首先，我们希望得到 店员博览会对了，我会打开我的 终端告诉 粘贴这个然后下一步是 获取类型来制作打字稿 高兴得到类型 定义，所以一旦完成，我们就可以 粘贴 好吧，那么如果你 住在土耳其，网络很差 连接好了，我继续 粘贴此 然后我们想设置我们的

51:02 环境变量我会复制这个 他们说现在稍后使用 EnV 文件 在视频中我们将使用凸和 他们实际上使用 env。本地文件 是一样的，但我们继续 创建这个我将把它粘贴到 这是书记员可发布的密钥 这是店员会用的东西 几秒钟后我们需要访问 布局并用 现在我将复制这个 部分，实际上所有这些都访问我的 布局文件应该在 现在我可以感觉到这可能看起来 少量 但现在让我们看看

51:50 我之所以说它令人难以抗拒，是因为 因为我们的空间确实有限 字体太大了，但我们还是可以的 我们得到了可发布的密钥，即 来自环境变量 我们可以对整个应用程序进行 WB 有了这个 部分，所以我将继续包装我的 [音乐] 应用程序，让我们结束这个 我们需要导入 这些他们将来自 所以我复制一下 [音乐] 好的，现在让我们保存它应该很高兴 但我们还有一些事情要做 现在店员存储活跃用户

52:37 会话令牌默认存储在内存中， 在 Expo 应用程序中推荐的方式 存储令牌等敏感数据 是通过使用 Expo 安全存储包 这将加密数据 在恢复之前，我们要 继续安装这个，让我们 应用程序更加安全 粘贴哎呀我做了什么让我们只是 粘贴它我想我刚刚做了一个 错误，让我只复制一次 再次清理终端并粘贴 这 接下来我们要创建一个缓存。 TS 文件在我们的根目录中，让我们复制 这些只是一些步骤

53:23 我们正在做我们永远不会 稍后再考虑 使我们的应用程序完全安全 身份验证将完美运行 所以我们有 30 行代码 店员需要能够 获取令牌并保存令牌 处理身份验证，以便您 真的不需要理解 这里发生的一切 背后发生了很多神奇的事情 这 场景好吧那么现在我们已经得到了 我们将添加这个标记 此令牌缓存到我们的职员提供商中 所以我会复制这个 部分保存此文件进入布局和

54:08 在这里我们想哦我有什么 完成，假设令牌缓存，我们 将从这里获取令牌缓存 我们拥有的缓存文件，我认为我们的 应用程序应该准备好了 他们有很多不同的步骤 我们将在几个 分钟，好的，现在在我们的 整个申请我们都有文员 初始化，我们可以使用 身份验证，让我们看看我们会 喜欢建立身份验证页面 你可以得到这些设计我认为我 忘记添加身份验证屏幕 但让我很快向你展示一下 所以我刚刚把它添加到这里 在身份验证屏幕上，让我们

54:54 看看我们有一个图标 我们有标题 A P 标签，也许是 描述图像以及我们的 身份验证按钮，让我们继续 设计好之后我们就可以制作 这项工作与店员我会打开我的 PS 代码在这里我想创建一个 身份验证页面，所以它不会 成为标签的一部分，因为你可以 告诉我们实际上没有导航 对于此页面或此屏幕，我 应该说我们不在网络上 所以我们实际上没有 页面，而是屏幕和 让我们从身份验证开始 将创建此文件夹，在这里我们可以 输入登录名。 TSX 文件，在这里我们将

55:39 喜欢先有自己的风格 然后我们将实现功能 这不是 CSS 课程 为什么我想跳过这个样式 这里我们有一个誓言样式。 JS文件 让我们把它变成一个 typescript 文件我只会说誓言 风格。 TS 和我将提供此文件 给你，这样你就可以从 GitHub repo，让我向你展示 全部的 如果你想输入这个，那么我们 正在获得我们正在获得的颜色 样式表以及尺寸 我们只需检查宽度和高度 这里有容器 品牌部分基本上是一些 CSS

56:27 只是为了让我们的应用程序 看起来干净 很好，所以我不认为我们 应该花 10 分钟来写 所有这些课程，所以我只是 提供给你，好的，这很棒 再次用这个简单的造型 让我们继续尝试 建立登录页面我只会得到 rnf 让我们尝试保存这个文件，实际上 实际上尝试构建内容，以便 在这里我将分享左侧 去欣赏一些有风格的风景 可以说风格就是风格。 容器和这些样式将 来自誓言样式文件，然后我们

57:14 会有品牌部分，所以我会去 提前说品牌 部分，我们只能说我们将有 一个视图让我得到这个，我 不想让任何人生气 我只是因为我复制和粘贴，但是 这是非常非常基础的东西 我们已经看过几节之前的内容了 具有某种风格和图标的视图 还有一些文字，所以没有任何逻辑 这就是为什么我想复制并 粘贴，我们会帮你完成，所以输入 这需要 3 分钟来解释 需要 30 秒，好的，我希望这 现在我们有了品牌部分 让我们保存并尝试看看我们

58:01 目前我们处于 我想要做的就是去屏幕 进入实际的索引文件，现在 我会把我的用户带到 身份验证 誓言也许 登录好，由于某种原因我们不能 [音乐] 获取类型 安全也许我们应该开始 应用程序我只会说 MPX 世博会新闻 R 并使其看起来像 好的，我们都登录了，但我忘了

58:47 用...包裹 括号现在我只需要重新加载这个 再次，它应该可以工作了，我们开始吧 这就是我们所拥有的 身份验证页面具体位于 登录页面我们刚刚添加了 uh 品牌 现在我们想有一个 我们希望得到 这张图片是我从 名为“故事”的网站 设置让我展示这个故事set.com它 应该是，我想我从 兄弟 我搜索的风格是 社交，让我真正为您提供 我刚刚抓取的实际链接

59:32 链接让我粘贴它这是故事 set.com SL 插图 slashonline 希望 SL 兄弟，这个名字很有趣，但是 我们走吧这是你可以去的图像 继续下载然后放入 你的资产，或者你可以直接抓住它 来自 GitHub Revo，所以在图片下 我想得到这个 源代码中的图像，所以我将 誓言 bg2 这就是我所说的 就像你想使用 我准备了两张不同的图片 他们也一样，所以 o bj3 和一个我会 喜欢用这个，但你可以用任何

1:00:17 我们有其他人 所以我们想得到插图 现在你的挑战是继续前进 并在屏幕上显示图像 我们之前已经看到过这种情况，因为它 我们需要在本地图像中 嗯，在图片来源中，所以我会 只是说 插图并粘贴它我们有一个 图像让我们从 React Native 导入它 在源代码中我们将得到 这张图片，因为这是本地图片 我们需要正确保存 好了，这就是我们所得到的，你可以 使用覆盖或包含这是基本的 CSS 我会选择封面，然后 图示我们可以把登录

1:01:06 基本上我们有 按钮向右我想再次 复制并粘贴此内容，请不要 生气这是非常基本的东西 到目前为止，我们已经看到了像 VI touchable 像这样的不透明度样式 一些我们没见过但名字 就像我们没有的媒体一样 这个函数我们把它留空 函数 现在我们只说控制台 记录好的让我们保存这就是我们得到的 与 现在我们应该能够做出 目前这项工作如果你点击它 我们只看到控制台日志，但是 让它与 Clerk 合作，

1:01:51 特别是谷歌 当我们点击这个时，现在进行身份验证 按钮，而不是做这个假 我们实际上可以这样称呼它 函数处理 Google 登录 上面会创建一些东西 假设 const 处理 Google 登录 这将是一个异步箭头 函数，在这里我们想做 我们首先需要得到的东西 来自使用 SSO 的职员的东西所以使用 单点登录，在这里我们想 开始 SSO 流程 在这里我想获取路由器 就像在 React 中一样，但是这会 来自 Expo 路由器 这将允许我们进行导航

1:02:36 我想尝试一下 在这里尝试捕获块 就像说等待启动 SSO 流程和我们的 策略将是你能看到的所有谷歌 有很多不同的选择 但在我们的案例中，我们将使用 Google 这将给我们一些 我们可以做不同的事情 我们可以创建这样的结构 会话 ID 以及设置活动，以便所有 这些是店员发来的 请随意检查文档 假设我们设置了活动状态 得到这个并且创建会话 ID 存在我们想说设置活跃 使用 uh 会话创建的会话 ID

1:03:25 这将基本上验证 当前用户，一旦我们 经过验证，我们可以替换 当前屏幕与主页 就像标签一样 在 catch 中我们可以放一个 控制台日志，我们应该可以开始了 假设这将是 错误好的我会保存并点击 这就是我们开始的地方，它说世博会想要 使用 google.com 让我们继续 我们应该能够看到我们的账户，这样 这些是这样的 我之前添加的帐户 并且语言是土耳其语 现在让我们把它变成英语 以便每个人都

1:04:11 好的，那我们尝试登录吧 有了这个，我们说 继续 好的 因为我们 因为我们 刚刚验证了它带我们去呃 右边的 feed 页面我们直接进入 主页或主屏幕我应该说如果 当你访问你的仪表板时你应该 可以看到你有一个用户 刚刚登录，这意味着一切都是 在职的 正确，但是现在如果我们重新启动 应用程序会发生什么 仍将带我们进入身份验证 页面是因为在我们的根布局中 让我关闭根目录中的所有内容 布局我们真的没有任何检查

1:04:56 为了获得认证权，我们总是 将用户带到登录页面或登录 屏幕，但我们应该在我们的 应用程序之前的根布局 开始我们应该检查用户是否 是否经过身份验证取决于 我们应该把用户带到 登录页面或相关页面右侧 因此我想继续 创建一个组件，这样我就可以把 逻辑具体到该文件中， 只是说 我将要想到的组件名称 其中将以初始 L 输出。 TSX 你可以 随便怎么称呼它，但我认为这 有道理所以我会说 rnf 将成为功能组件

1:05:43 我们这里什么也没有 与 React Native 相关，因为我们 不会再回来了 um jsx 对吧让我们 只需删除它，这将是 我们处理 身份验证和导航让我 再次放大，好的，首先我会 喜欢从使用誓言中得到一些东西 那么我们能从这里得到什么 假设我们想检查一下 店员很忙，你可以读一下 描述一个布尔值，表示 办事员是否已完成 初始化最初是错误的， 一旦店员加载，它就会成为现实 我们可以检查用户是否已登录或 否则我们可以得到

1:06:29 假设使用段和 你会明白这意味着什么 基本上它会给你片段 当前屏幕，所以如果你在 如果您正在登录，则显示主屏幕 你知道你是否在 通知等等我们 马上就看到这个，让我们 说嗯好吧我们会买一个路由器 我会说使用来自 探索者，因为正如你所看到的，我们将 做一些导航，在这里我 希望有使用效果 来自 react 即使这是 react 原生的我们仍然可以像你一样使用 React 我们之前已经讨论过它了

1:07:15 它真的非常类似于对 在 React 的顶部你只需要几个 目前存在不同的概念 我们想要检查的使用效果 一些东西，所以首先我要说的是 店员不是 加载后直接返回，不做任何事 这里我们可以添加的是 加载我们会说已签名 我们可以添加片段，如果有的话 这些变化 如果其中任何一项改变了此用途 效果应该再次运行，现在 我会得到一个变量，我会说如果你是 在 誓言

1:08:02 页面，这就是我们可以检查它的方法 我们只能说，如果第一部分 如果这是 这意味着我们在宣誓页面 因为我们实际上没有 Pages 让我们宣誓 假设用户未登录 如果用户不在宣誓屏幕中 这意味着他们应该被导航到 主页或登录页面我的错 我们会说路由器。替换带他们去 登录页面，同样如果 他们正在尝试 作弊所以我们说否则如果哎呀让我们 如果用户已登录并且

1:08:48 他们仍在尝试访问登录 我们将带他们去 主页，最后我们会 如果没有加载我们可以 返回 null 或者我们可以返回一个加载器 组件，如果一切完成 成功的话我们就可以返回 让我们得到这个，然后我们就说 屏幕选项标题显示为 false 好的，如果用户已经通过身份验证 如果他们访问主屏幕 或者如果他们访问通知屏幕，我们 如果 检查，我们将把它们带到 相关屏幕，现在我们继续

1:09:35 进入这个布局，而不是这样 堆栈中我们将有初始布局，因此 以前我们有堆栈，但是现在 我们把它放在了上面我们有 添加了身份验证逻辑 做导航所以我希望这能 感觉 让我们得到初始 布局保存它现在我们可以看到 由于我们已经登录，因此我们需要 主页我将继续 像我们默认的那样刷新 主屏幕，即使我们的索引 文件说带用户登录 自从初始布局运行以来我们

1:10:21 在实际的主屏幕上，好吧，那么让我们 迅速关闭所有内容并重申 我们目前所做的，那么我们就 继续下一部分，所以我们有 设置得更清楚，我们只需要得到一些 我们需要设置的环境变量 这个缓存。 TS 文件 我们其实不需要理解 这完全是店员 需要能够处理 安全认证，然后我们有 建立了一个非常酷的登录页面 设计中我们添加了这个有趣的 函数名为处理 Google 登录 我们只使用 clerk 函数 一旦您通过身份验证，我们将 用户进入主页，并在

1:11:06 初步检查我们有一个名为 初始布局将执行 身份验证呃导航右如果 用户未登录，并且如果他们 不在宣誓画面中 导航到其他的宣誓屏幕 它们应该在标签页中，并且 如果这些都不正确，那么我们 将会到达这个返回语句 我们会显示相关页面，好的，我们 已经用以下方式包装了我们的整个应用程序 这些清晰的提供商，我们有 初始布局检查就像在根目录中一样 布局正确，好的，所以希望这能使 感觉这可能看起来有点 很复杂，但如果你仔细想想

1:11:53 你一步一步地了解这段代码 basee 我认为这应该有道理所以我 会说暂停视频并拍摄 查看代码库，尝试看看我们 到目前为止，大约需要 5 分钟，然后在下一节 我们将继续整合 数据库到我们当前的 应用程序好吧所以这是 我们离开了，我们有综合文员 身份验证，现在是时候 有一个数据库，为此我们将 使用凸函数，你可以找到 他们有一个免费计划的描述 我们可以像店员一样使用，所以让我们 在我们尝试之前先去参观一下 登录并创建一个应用程序 知道凸可以作为你的

1:12:39 整个后端，实际上在这个 我们将使用它作为我们的 实时运行的数据库 我们将使用他们的文件 存储，以便存储我们的文件 比如我们的帖子Imes正确和 有几个不同的概念 比如查询、突变、操作等等 等等，我们将进入，我们将进入 他们说得对，所以我想去 继续并记录 如果你没有账户，请继续 创建一个你其实并不需要的 再次支付任何费用 从这里创建一个项目，但是我们 想要真正创造它 所以我打开我的终端

1:13:26 让我们用命令或控制来杀死它 C 澄清一下，我们想说 npm 安装哦，假设是 npm install 凸的，顺便说一下，你可以采取 也看看文档 说文档。凸 DOD 有很多不同的 SDK 我们的情况我们希望做出反应 与 Expo 同源，所以我们已经有一个 世博会申请我们只想 安装凸并运行此命令 让我们看看这将在 终端现在我们有了这个 准备好了，我们继续粘贴这个 你正在使用这个命令 第一次它会要求你登录 你的 conix 帐户，但由于我

1:14:13 已经登录，它要求我创建一个 新项目或选择现有项目 想要创建一个新项目 我只需选择这个按回车键，我们 可以给它起个名字，所以我就说 Spotlight 应用让我们自动接受 我们希望将其部署到 我是说 CLA 云环境，所以我会 只需选择这一个它将继续 并为我们创建一个项目现在它说 准备好了让我们看看 我们实时地进行，它有效，我们 得到了聚光灯应用程序，这里 我们确实没有任何桌子，但是 我们想创造一些 不同的表格，例如

1:14:59 用户帖子 通知等等 好的，但首先我们需要处理 身份验证，那么我的意思是 你可能会说好吧我们已经处理过了 是的，我们找到了店员 工作正常，所以这是正确的，但我们也 需要连接该身份验证 使用我们的数据库提供服务，因为 如果你仔细想想 Clerk 和 convex 是两个不同的 当有人注册时提供的服务 我们需要让我们的数据库知道 关于该用户的信息，以便我们可以存储它 在我们的数据库中，让我们尝试看看 我们将要采取的文档 看看嗯认证

1:15:47 具体来说 店员，好的，所以这告诉你继续 注册 Clerk 这是 我们已经完成了我们已经创建了一个 应用程序现在说你应该 创建一个 JWT 模板，让我们从这里开始 在配置下并确保你 选择正确的 应用程序因此配置 JWT 模板 创建一个与之匹配的新 凸起好的只需复制此问题的URL保存 让我们看看下一个 步 他们告诉我们要立下誓言。

1:16:34 config.sys 但是我们有一个凸文件夹 我们要去的地方 把所有相关内容放入我们的数据库 这是凸数据库，对吧，所以让我们 继续，首先处理 根据此誓言进行认证。配置 点文件，所以我将粘贴我所拥有的 复制一下我们会用到它 并复制整个 将其粘贴在下面，我们希望 用我们已有的来改变这部分 就在这里，让我们剪切并粘贴它 好的，这应该可以了，这是 我们必须在八点左右做某事 代码行让我们关闭这个文件 让我们看看下一步，好吧，他们说

1:17:21 你现在应该运行这个 能够部署您的更改，但我们 现在已经打开了，只是 说凸函数是 准备好了，所以从这里开始记住这一点 直到本教程结束 想要两个不同的 打开一个终端就会运行这个 npx 凸 Dev 所以每次我们 应该有这个 npx 凸 St 运行 因为当我们添加一个函数时 与我们的数据库相关它将部署 我们的变化凸，然后我们 将使用 npx 运行我们的应用程序 博览会吧，我会在

1:18:06 第二，但首先让我们看看另一个 步骤，这是指南 呃，店员的反应，但在我们的例子中，我们是 使用 Expo，所以我们不需要 安装这个我相信让我们试试看 我们怎样才能让这个工作像他们一样 就像您在主页中看到的那样。多伦多证券交易所 他们用以下方式包装整个应用程序 文员提供者以及凸 供应商和店员让我们尝试做 但我们不想使用应用程序 将我们的布局包裹起来 应用程序所以我知道这听起来可能 很复杂，但我们试着看看 我想包装或者我想

1:18:51 创建一个名为providers的文件夹 保持我们的代码库清洁，我会 说 Clerk 和凸 提供商。 TSX 所以基本上不是有这个 店员嗯，我想采取逻辑 并将其放入自己的 文件，所以让我们尝试构建这个文件 我所以让我们尝试构建这个文件 我保证这100%有意义，所以我会 只需说 rnf 即可获取此代码 删除这个导入我们可以删除这个 返回语句而不是 VI，我们将 喜欢获得文员提供者

1:19:37 即将从办事员博览会和 这和我们所拥有的完全一样 完成这里后，我们想要获取令牌 以及可发布的密钥，让我们尝试一下 要导入这些，我基本上只需要剪切 从这里得到它然后我们开始 令牌缓存获取店员提供商 好的，现在在这个里面，而不仅仅是 有了店员的支持，我们想 也有凸提供者，所以说 凸提供者与职员我认为它 应提供 店员就像这样，我们会 从中导入 好的，现在这给了我们一个错误

1:20:25 因为如果你看一下 文档将客户端作为 以及使用誓言，所以让我们尝试添加 我只想说，在这里使用誓言 将从书记员世博处获得使用誓言 然后我们想添加一个客户端 尝试在上面创建它我会复制这个 所以这是来自 文档 um convex react 客户端 应该来自 凸起反应好吧就像这样让我们 尝试导入它，然后我们就可以了 使用公共凸 URL 这是 来自环境。当我们运行时本地 我们在终端中得到这个命令

1:21:12 这些环境变量没问题 记住，我忘了给你看 但这些是我们 在 EnV 中 文件 好的，那我们就去添加这个 凸客户端就在这里，那么我们就可以 只要说一次店员 装好后我们可以用它来包裹我们的孩子 这些孩子将作为 我们可以说孩子们将会是类型的道具 反应节点所以我们做了什么 到目前为止基本上我们把整个 部分将其放入其自己的文件中 自己的组件，在它上面我们有 凸集与它对，所以我们

1:21:58 基本上可以继续删除这部分 我们可以彻底删除令牌缓存 这些进口，我们可以包装我们的 与职员和凸面一起申请 我们刚刚创建的提供程序 在我们的整个应用程序中我们可以 店员和凸工作 在一起，我们把这个逻辑 将其放入自己的文件中，以便我们的 代码库更加易读，并且 就像 组织好了，所以考虑到这一点 让我们尝试删除这个堆栈并保存 这 文件好吧所以我们真的在做一个 到目前为止，我们已经取得了良好的进展

1:22:45 现在有了身份验证和数据库 你可能会觉得我们有点 慢慢地，这是正确的，但我们 真正构建一个真正的文字应用程序 应用程序正确，所以我们只需要 慢慢地照顾好每一步 我们都明白 我们现在有数据库，还有 以及身份验证系统是时候了 也许只是继续定义我们的 所以我说过我们要 有供用户发布评论的表格， 等等等等，因为它是 与我们的数据库相关，我们将 进入凸文件夹 我们将定义我们的模式，所以让我们 说模式。 TS 这是一个特殊文件

1:23:31 这将使我们的代码库变得呃 输入安全，所以如果你不知道那是什么 意味着它基本上会给我们自动 完成，这样我们实际上就没有 我们的代码中没有任何错误，所以它只是 按照名称所示输入保存即可 所以让我们看看如何 定义我们的表格，我们如何定义我们的 我会说导出默认模式并让 我我 Shing 左手边我们 定义模式，它是一个 函数假设让我删除 这是来自的一个函数 凸我不知道为什么它没有 默认导入，但应该是 来自凸服务器这将需要 一个对象，在这里我们可以定义我们的 我想要的第一个表

1:24:18 有将是用户，所以我们只说用户 定义表 说定义表就像这样 来自凸的相同导入 服务器这是我们的一个函数 我们会打电话，然后 具有我们想要的字段的对象 因此每个用户都会有一个用户名 这将是字符串类型 但我们可以这样做 说 v. 字符串，我们需要得到这个 V 从凸值，也就是我们的 验证器好的那么每个用户都会有 一个全名，所以我们说 v. 字符串为 那么如果这是 jandoo 这是全名

1:25:04 像这样的版本，那么我们会喜欢 为每个用户提供电子邮件 假设 v. 字符串每个用户 会有个人简介，但这可能是 可选权利，所以我可能没有任何 所以我只能说 v. 可选，而且它 将是类型类型 字符串，那么每个用户都会有一个图像 这可能是可选的，但由于用户 使用 Google 登录后他们将 反正有图像，所以我就 删除可选字段，假设 每个用户都会有一些关注者 将会是 v. 数，我们只是 以同样的方式将其存储为一个值 将有

1:25:50 我们会以同样的方式 有帖子数量 最后我想得到一个领域 称为颜色 ID，其类型为 字符串现在我们为什么要存储店员 ID 用户表，所以如果你考虑一下 Clerk 和 convex 是两个不同的 服务对吧我们已经讨论过了 当我们向店员验证身份时 与店员注册我们将保存相同的 用户到我们的数据库，所以我们说我们得到了 刚刚注册的用户 店员，我们想把它保存到我们的 数据库，我们希望保留 引用该用户，因此我们只需 添加店员ID，它对应 店员服务正确，这是

1:26:37 当用户签名时我们该怎么做 我们将添加该用户的店员 ID 默认情况下，用户将有一个字段 称为下划线ID，这将被赋予 如果你使用过 mongodb 以前它会做同样的事情 这里凸函数做同样的事情 它为您提供了一个创建时间字段 默认情况下，它是在 日期好的，现在我们想添加一些 索引可以帮助我们 稍后在视频中查询，以便我们可以 只需通过店员 ID 获取用户即可 所以我只能说添加一个索引你可以 随便叫什么我都叫它

1:27:23 购买店员 ID 和我们要的字段 喜欢查询将是店员ID所以 基本上在视频后面我们会说 嘿，给我们一个用户，假设一个 例如获取用户 按店员 ID 好的，我们就拿这个 假设我们要调用一个函数 呃，我们要把店员的身份证放进去 说它是一二三，它会给出 我希望我们拥有这个店员 ID 这很有道理，基本上使用索引 有一些疑问，它只会让它 更快，然后我们就可以添加我们的 其他表，所以我只想 把它们一个一个地抓取并粘贴

1:28:10 我想逐行解释一下 好的，所以我们有帖子表 就像我们在这里所做的那样， 定义一个表，每个帖子都有一个 用户 ID 这是帖子的所有者 那么每篇文章都会有一个图片 URL 因为这是一个类似的应用程序 Instagram 我们必须有一张图片和 我们现在想存储一个存储 ID 当你想要 删除帖子，这种类型将 是存储ID，这是 我们稍后会在视频中看到这里 如果您已经意识到用户 ID 是类型 V 呃像用户 ID 如果你删除这个 您可以看到它应该是类型保存 嗯，目前

1:28:56 我不知道也许在这个模式中 我们不太明白，但在其他 我们实际上会得到那个文件 每篇文章都会有一个标题，但它会 是可选的，所以你不需要 添加标题，我们将存储 点赞数和评论数 然后我们就会像 添加一个索引，我们只需说嘿 给我们一个用户的帖子，我们将 传递用户 ID 它会给我们 发布与该用户 ID 匹配的帖子，因此如果 这个索引内容一次都没有意义 我们使用它们我认为它会 好的，那么我们想存储 评论对了，我就把 评论表让我们分别定义它 评论将有一个作者，

1:29:42 是用户 ID，每条评论将是 在帖子上制作，所以它将 与我们刚刚发布的帖子相关 输入这些字段，然后我们添加 评论内容本身，我们再次 添加查询，然后我们将存储 点赞数量正确或我应该点赞 假设我们要有一个喜欢的表 我就把它放在 评论让我们在这里加一个逗号好吗 我们会有一个表，叫做“喜欢” 我们喜欢一篇帖子，我们将创建一个 类似文档，其中会有一个用户 ID 并且帖子 ID 用户 ID 是被点赞的 对，所以是作者和帖子

1:30:29 ID 表示我们喜欢哪个帖子 那么我们现在可以添加一些索引 让我只拿那些我们应该能够 通过帖子 ID 查询点赞 嗯，所以我应该说，然后我们 应该能够与用户和 帖子 8 所以再一次，如果这不 有道理，我认为这应该真的 当我们到达时确实清楚 本教程结束，因为我们将 使用这些 索引嗯，它应该是真的 很清楚，那么让我们来看看以下内容 以我们想要的方式 有几个不同的索引让我 继续吧 下面我们定义另一个表

1:31:15 我们有一个关注者 ID 和 关注 ID，所以假设我们有两个 不同的用户 John 和 Jane 现在如果 John 假设 JN 跟随 Jane 这意味着 JN 正在关注，对不起 JN 追随者是对的，它遵循 Jane 和 Jane 是以下当 JN 沿着链条，我们将创建一个 关注文档我们会说关注者ID 我们将输入约翰的 ID 和以下 ID 将是连锁店的 ID，现在我只是 解释得很慢 你第一次建立社交 媒体应用程序，所以我觉得我有 为了解释这一点，我们添加了一些 我们将使用不同的索引

1:32:02 稍后在视频中，好的，那么我们会 喜欢跟踪通知 所以当你喜欢某个帖子或者当你 对帖子发表评论或关注 你想发送 通知，所以我们创建这个表 我会说通知定义一个表 使用这些字段，因此每个通知 将有一个接收者和一个发送者 现在我们将把它们存储为 ID 通知将有三种不同的 要么喜欢评论要么关注 你可以直接说 v。 字符串这也是可以接受的，但是 让我们的代码更干净一点 我们可以强制执行，我们会说

1:32:47 它将是联盟 类型，它将是其中之一，所以 v。 字面意思可以是评论 或者按照然后像它将有两个 不同的字段一个帖子ID和一个 评论ID现在这些都是可选的 因为如果这是一个关注通知 它与任何帖子无关，所以 不会有任何帖子 ID，而且 也不会有评论 ID，但是 如果是点赞或者评论 通知它将具有这些字段 对的，这里我们再次添加一个 索引所以我们有最后一张表让我 保存以获取此格式并通过

1:33:32 无论何时保存，都需要 查看此文件并尝试部署你的 函数到你的凸 仪表板好的所以最后一张表 我们将拥有的将是书签，让我 只要我们为某个对象添加书签，就可以粘贴它 发布后我们将创建书签 包含这些字段的文档，好的，所以我可以 确实感觉这可能有点 有点让人不知所措，但基本上这些 我们将要使用的表格 在本项目中的教程中，我们将 使用这些 索引好的，让我们保存并查看 在我们的 如果你喜欢仪表板，如果你说

1:34:19 生成模式我不知道为什么我们 没听懂，但让我们刷新一下 页 页面好的所以我认为我已经访问过 生产嗯我应该去参观 让我们来看看 这个例子如果你看一下 你应该能够看到所有 像我们所有的表一样的字段 如果你说表演 像这样的模式是疯狂的代码 我们刚刚在当地 机器现在可以通过网络访问 凸形仪表板，所以这些是 这是我们刚刚得到的代码 写成，我们也应该这样写 能够在这里看到我们的功能，但是 目前我们确实没有任何 函数，也就是我们

1:35:05 接下来我刚刚说我们 构建一些函数 具体来说，凸函数现在你 可能会问什么是凸 基本任何操作都能正常运作 我们需要的与背部相关的 数据库的最后，我们将 建立一个函数来给你一些 例如，如果你想获得 如果你想做一个 我们将要写一个请求 函数名为 query，它将 知道给我们一些回应所以这里它会 把帖子发给我们，并以同样的方式 我们有不同类型的函数 称为突变，我们可以使用它 用于创建更新和删除操作 如果你想要的话，这里有一些例子

1:35:52 要创建一个帖子，我们需要创建一个 如果你想更新 评论我们将要构建一个突变 如果你想 删除帖子我们要建立一个 突变，所以第一个突变 我想要做的就是创建一个 用户权限，假设创建用户，这是 将会有一个突变，它会写入 在我们的凸后端，你可能会 问为什么会这样，所以让我们 只需在图表上看一下即可 目前我们的状态是 我们刚刚和办事员注册了应用程序 没错，我们的职员下面有用户 但我们实际上没有 如果您采取 看看我们真的没有这个 用户，所以我们需要获取该用户并

1:36:39 也在我们的数据库中创建它， 我们怎样才能在那里顺利实现这一点 有一个概念叫做 Web hooks，它 对于某些人来说真的非常重要 你要明白这不是具体的 对本机做出反应，或者这不是特定的 仅对于这个应用程序来说，这是一个 每个 Web 开发人员的一般概念 应该知道，所以让我们看看他们 首先，他们是 自动发送的消息 发生了一些事情，在我们的例子中 当用户创建了某事时 当用户签名时，我们会说嘿凸 只需向我们的数据库发送一个事件 我们将保存该用户 它到我们的数据库，所以有一个 店员呼叫用户的事件

1:37:26 我们将聆听 此事件并且只会发送一次 对于每个用户来说，因为他们可以 只需注册一次，以后他们 只能登录所以我希望 有道理它会向我们发送一个事件 这就是所谓的用户创建和 此次活动他们还会向用户发送 他们的全名等信息 电子邮件呃个人资料图片 用户名等等，我们 将此用户保存到 我们的数据库，让我们尝试 创建名为 create user 的函数 所以我只需访问 vs code let's kill 凸面之下的一切我都会 创建一个名为 users 的文件。是的，

1:38:13 与用户相关的一切 我们要把它放在这个桌子上 文件，让我给你展示一下 文档也是如此，所以我只想说 沟通 让我们来看看 如果你想检查一下 完成本教程后 所以只要记住一切都是 实际上来自文档 这里我们可以看到有三种类型 我曾提到过的一个功能 其中有查询，然后是突变和 还有一些动作，你可以使用 与第三方交谈时的行为 Stripe 等开放 AI 服务 等等现在让我们尝试 构建我们的第一个突变，所以这是 他们会给你类似的语法

1:38:59 我们直接复制它，我会把它粘贴到 vs code，但我们显然会 改变它好吧好吧让我们实际上 删除我们目前拥有的所有内容 只是我不知道为什么我复制了它但是 让我们继续尝试构建它 从头开始，所以我们有一个功能，你可以 对我来说，无论怎么称呼它，我都会说 创建用户这将是一个 突变是我们 调用并且它需要一个参数所以在这里我们 可以采取一些弧线，假设我们 想要创建一个用户应该有 几个不同的领域，其中一个 是用户名，如果你想查看所有 我们拥有的这些领域是 我们应该把 论点正确，所以让我得到它们

1:39:44 我们很快就会得到 用户的全名，因为我认为 这就是我们在模式中看到的 我们将要有一张图片 有个人简介，所以这些是字符串类型 这也是字符串类型，但是 这是可选的 用户注册后不会有个人简介，因此 我们还要添加电子邮件， 终于店员身份证现在这不是 真的很高兴，因为我们需要 添加一个处理函数来执行 逻辑上，假设异步，这将 以上下文为第一 然后我们将采取 这 现在你可能会说这是什么 上下文就是通过使用这个 您可以与您的 数据库以及检查

1:40:32 身份验证，通过这个弧线，你 基本上可以访问这些弧 所以让我们继续说 await 基本上我们正在尝试创建一个用户 在数据库中，所以我们会说等待上下文。 分贝。插入我们只需找到它，我们 想插入一些东西 用户表，在这里你可以看到它是 如果按下 Control 键，则输入 Save Right 空间里你可以看到我们所有的桌子 我们想去用户下面 表格，我们将添加所有这些 我们拥有的字段，例如用户名 全名让我接受一切 所以这些就是我们的论点 右上方，在这些之上，我们会

1:41:17 喜欢添加默认字段，例如 关注者数量和 当用户默认注册时发布 将是零，好的，现在就在我们之前 创建我们需要检查的用户 已经存在了，因为 可能会有一些错误，这个功能 可能会为用户调用两次，因此 我们将检查用户是否存在 已经或 不，我们开始吧，我只会说好吧 实际上在我们分配之前我会 说等待上下文。 DB 我们希望 在用户表下查询一些内容 我们将使用索引来查询它 我就在这里说点 索引，我们已经创建了一个索引

1:42:03 通过店员 ID 呼叫，这些是 店员给你的其他索引，所以如果 你看一下这个模式 我们在 用户表，所以我们要说的是 通过店员 ID 调用索引，我们在这里 将传递一个回调函数 我们将接受查询，因此我们会说 询问。如果相等，则等于店员 ID 对于这个论点，这将 给我们一个可以获取的结果 与 first 或 unique 相同 我首先要做的事情，我们将 将其分配给名为 现有用户就像 我会说如果现有用户

1:42:50 好的，如果我们有一个用户，只需返回 不做任何事情，但如果用户不是 存在，我们将继续前进 在数据库中创建用户，所以我 希望现在我们能够看到这一点 如何创建索引以及消费 我们基本上呃我们基本上得到了一个 具有店员 ID 的用户和此店员 ID 来自于争论，好吧，所以我们 已经创建了这个函数，但是如何 我们称之为正确我们刚刚谈论过它 当有人注册时在图表上 与店员一起 店员需要将此发送给我们 呃，webbook 事件，所以我们只需要设置 你可以看看这个 从文档中，但让我 带你了解一下，我们将 仪表板下方

1:43:37 配置我们只需要找到网络 那么我在哪里 我想是因为某种原因我看不到 让我们搜索一下 Web Hooks，好的 我们去 开发人员我们想添加一个 webbook 和具体的端点所以 假设能够添加这个 我们只需要得到凸的端点 下的 URL。 EnV，所以我会继续 复制整个称为凸 URL 的内容 如果你愿意的话，现在就到这里粘贴 添加 Web 钩子端点 说云这应该是站点和 你可能会说你怎么知道这个 基本上再次从

1:44:24 文档，比如 HTTP 操作 凸的，我们去那里他们告诉你 你应该在最后使用网站，好吗 那么我应该 喜欢听我就叫它 你可以这样称呼店员网络钩子 任何字面意义上的你好，但它 不应该喜欢它应该有意义 好的，所以我就说店员网络钩子 以及我想参加的活动 听这里我们可以看到我们都有 各种各样的活动 但我想听听用户的意见。创建 好的，我继续添加 这个，我们刚刚得到了一个签名秘密， 这真的很重要我们应该复制 并将其添加为环境

1:45:09 变量，而不是将其添加到 EnV 文件我们将继续添加它 进入我们的凸形仪表板，所以在 环境变量下的设置 我们要说书记员的秘密和 在你的情况下添加这个值 不同请使用您自己的因为我 在我发布之前会删除我的 这个视频我们继续保存吧 好的，现在我们已经设置好了 让我们继续写一些代码来制作 这项工作，我需要提一下 当店员给我们发送一个事件时，我们 将会带走用户并保存它 到数据库，但现在想想 每个人都可以给你发送这种 事件正确，我们可能会有恶意

1:45:56 使用它就像它会给你发送这个 事件发生数百万次，在这种情况下 你只需要确保这个 事件实际上来自店员，所以 考虑到这一点，让我们尝试写我们的 代码所以我将创建一个名为 HTTP 的文件 点，然后我们将构建逻辑 在这个文件中，所以我想进入 就像得到一个包裹 我只想说 npm install svix 用于验证 Web 钩子 好吧，让我们等待 安装好了我们就可以了 我没有 X 应用程序 但我只会在 其次，让我们尝试构建这个文件

1:46:43 首先，我要得到几个 从凸面导入不同的内容，我们 将从 SV 获取此 Web Hook 包，让我们创建一个路由器，我将 说 const HTTP HTTP 路由器，我们将调用 现在我保证这个代码将使 一旦我们完成这个文件 请耐心等待几分钟 我们会说 HTTP 执行路由，我们将 创建一条路线，这将需要 我们将要说的路径所在的对象 等于我们刚刚创建的 是 Slash clerk SL web hook，所以如果你 已经创建了这个你应该 把这个名字放在我的案子里这就是我 已完成正确的文员D网

1:47:31 钩嗯让我们回去然后 方法类型将是 post 以及 处理函数，所以这是逻辑 我们将要 放，我会把它放在线上，如果你 想要它你可以创建一个函数 外面，但这并不重要 事情不会是这样的 说它将在 http 操作中 我们将采用回调函数，就像 我相信这一点，而不是呼吁 我将按照要求称其为残骸 好的，现在让我们继续创建我们的 函数逻辑所以首先我们 只需检查环境 变量是否存在 con web hook secret 让我复制一下 粘贴这个，因为我真的

1:48:16 打字慢，而且我不太想 浪费太多时间所以我们去 过程。 EMV 和搜索 Clark 网站 钩秘密，你只需要 确保这与你 正确输入应该是 完全一样，否则就会 未定义，这里我们只说如果 此 Web Hook 机密未定义 我们只会抛出一个错误，然后我们 只需检查标题即可 我说过我们只需要确保 这个网络钩子来自店员，所以 我们先来检查一下 标头，因此在此请求标头中 将是 svx ID 签名以及 时间戳，如果这些值中的任何一个 那么我们将加入

1:49:03 像这样的错误或响应 会是400，我们会说不 SV 标头已找到，但如果我们有 标题我们可以继续做某事 否则我们将从 请求，我们将得到 身体就这样出来然后 我们想创建一个网络钩子，所以我会 只需说 const web hook 我们就 把这个叫做我们刚刚的类 上面，我们将把网络 把秘密挂在里面，然后我们就说 让事件这可能是任何类型的呃 现在我们就让它保持原样吧 我们现在将使用这个事件 这里有一个 try and catch 块，我只想说

1:49:48 验证 Web 钩子，这就是方法 我们可以验证一下请让我继续 并得到这个所以我们说呃网络钩子。 确认这是我们的身体，这里是 如果这是，如果这不是抛出的 任何错误都意味着它已被验证 成功但如果抛出一些 错误会触发 catch 块， 我们将收到错误并抛出响应 好的，到目前为止我们所做的就是 检查环境变量 并验证 Web 钩子 好的，这就是我们所做的，如果 到目前为止一切顺利我们可以走了 并实际保存用户到

1:50:33 数据库，我想得到 我们从这个 EVT 中得到的事件类型 刚刚创建上面，在这里我们可以看到我 本来想说这应该是类型 保存我们一秒钟就能完成 就说事件吧。 输入后我们会检查，所以我会 如果是这样的话我只是无意中 暂停视频让我们继续 如果事件类型等于 用户。创建后我们将运行这个 呃，我们可以继续前进，抓住一切 我们来自的这些领域 所以我们基本上会解构它 来自事件。我们正在获取 ID 的数据 现在我们有电子邮件地址，但是 我们将采取主要措施， 我们可以这样做，我们只需说

1:51:20 因为在职员账户中 用户可能有很多不同的电子邮件 我们将获得主要地址 一个正确，然后我们就可以得到完整的 名字，所以他们有名字和 姓氏我们可以将它们组合在一起 然后我们基本上可以运行 突变哎呀让我回去吧我们会 在 try 中有一个 try catch 块 说一个等待上下文。运行突变和 这里我们只说 API 这是 我们进口的东西 此前这是来自 从凸面生成的文件夹，这是 你不需要的文件夹 想想这是 凸面已经为我们创建，将

1:52:07 允许我们与数据库进行交互 我希望这有意义，我们削减了 API 从这里我们可以说 API。用户在这里我们可以看到这种类型 保存，然后我们可以创建用户，这样我们就可以 称这种突变为 诸如我们拥有的电子邮件之类的论点 我们可以这样写，或者 我们可以缩短它，这就是我要做的 我们只需添加全名 这是我们创建的名称 上面，我们要把图片 这将是图片的 URL 现在我们可以从店员那里得到 店员 ID 以及用户名 假设用户名，我们如何创建 这个用户名所以这就是

1:52:53 我会做的让我们想象一下 用户等于 Chando gmail.com 我 将继续获得这个作为 用户名，让我们用拆分来实现 我会说的方法 带有添加符号和抓取的 email.it 第一个值是这个 我希望这是有意义的， 我们可以控制台日志和错误捕获 像这样，并抛出一个回应 状态代码 500，但如果一切 如果我们没有 到目前为止我们都可以返回任何错误 我们可以说 webbook 的回应 处理成功，这里是 状态代码好的所以我希望现在这个

1:53:40 函数或这个文件正在做一些 有点道理，所以我们所做的就是 一些导入创建了一个 HTTP 路由器， 我们在这条路上聆听着 这个发布方法，这里是 我们将要运行的函数逻辑 我们将考虑上下文以及 首先请求我们只需要确保 此事件来自 Clerk 和 我们有很多不同的非常酷的 检查，以便我们的代码看起来干净， 一切都会正常进行，所以我们 检查标题 检查 环境变量我们验证网络 像这样钩住，为此我们有 使用名为 svx 的包，因为这个 也是呃职员使用的东西

1:54:26 所以我们必须使用它 Web钩子基础设施，然后我们 已成功验证 Web Hook 我们检查我们拥有的事件 前面提到提取用户 数据并将其保存到我们的数据库中 让我们继续删除用户 办事员 仪表板，我们将尝试从 删除用户 也许在我们删除该用户之前 让我们尝试退出，我会说 MPX Expo 我会打开我的模拟器 说 R 呃也许我应该先按 I 好吧，它就像被创造出来一样 R 好吧，为什么这不是

1:55:13 工作正常所以我就关闭它 应用程序按下我现在有了这个 捆绑我们应该能够看到我们的 应用程序，让我实际上 向您展示我们如何注销，我会去 进入主屏幕，即索引 在标签下，嗯，这里，而不是这个 链接我们只能说我们将有一个 嗯，我不知道，就说可触摸吧 不透明度让我们给它一些样式 说我们实际上没有这个按钮，但是 让我们把它排成一行，我只说颜色 我们有颜色吗 没有 好吧 所以这里我就放一个 文本好的，请稍等一下，看看这个 很乱，但我们会让它发挥作用

1:56:01 退出 我会接受这个 Styles 说过，我只想说 颜色将 好的，我在做什么，应该是 另一个物体，比如说颜色应该是 白色，好吧，我们有这个标志 按钮，当我们点击它时， 确实想从工作中得到一些东西 所以我认为应该使用它来让我 再检查一下，我们可以有类似的标志吗 是的，我们有，所以当我们点击 所以假设我想 现在调用退出功能 Ty TypeScript 对我们不太满意 它希望你这样说 我们继续吧，好吗，我们保存吧 如果我点击这个，我们就会退出，

1:56:48 我们的布局再次运行初始 布局，它会检查你不是 验证通过后，您将进入登录页面 页面，因为我们总是说，每当 呃，登录字段更改你应该 运行这个使用效果，这就是为什么我们 被带到宣誓页面，好的，这是 我们稍后会用到的函数 在视频中，但我们只 现在在主页上，好的，现在我们开始吧 提前删除此 当我们尝试注册时，用户现在 店员我们应该让用户都在这里 然后在我们的数据库中 我们没有任何用户的数据，但是 让我们一起努力吧，我会尝试注册

1:57:33 用我的谷歌 账户，所以我们刚刚注册了 它也应该在这里，让我们来看看 看看我们得到的仪表板 用户好的我们有它但是对于一些 我们没能在这里找到原因，让我们看看 为什么会这样，这是真的 世界编程我们可以有一些 问题和错误，但我们应该 能够很快地调试它，而且我 不会剪掉我想让你看到的这部分 调试过程所以我就去了 进入我的网络书籍我需要检查为什么 失败了，我们首先有控制台日志吗 让我们看看这里

1:58:20 不要嗯嗯这里 说 b 请求发生错误 推必须有它哦好吧所以你 可以告诉我们应该有一个默认导出 我忘记在 HTTP 中执行的路由器 TS 文件，所以我们应该说导出默认 这 HTTP，所以我会从最底部继续 我会说导出默认文件 现在保存我们不应该有任何 错误好的我会继续尝试删除 我会尝试 从头开始注册的原因是我 我正在删除此内容，因为此活动 仅在用户注册时调用 我们继续吧，我会尝试签名

1:59:07 再次知道我们 没有真正让用户 我会尝试用这个数据库注册 帐户让我们刷新一下我们有用户 职员和凸面也是如此，它是 实时工作我不需要 刷新一下，这样我们就得到了 未设置，但我们有店员 ID 电子邮件 这些领域，我们拥有的一切 只需正确放置，默认情况下你会得到 这个下划线 ID 字段来自 凸起以及创作时间好吗 太棒了这意味着我们的数据库现在是 与店员权利同步 刚刚学到了一些东西 很重要的一个词是 Web Hooks，它

1:59:54 你可以用在你的其他 你可以在一个 采访时你可以说我已经建立了 我使用 B hooks 制作的项目 确保我的身份验证服务处于 与我的数据库同步等等 这是其中一个用例， 在视频后面我们会看到 我们如何检查身份验证 在我们的凸函数中，但让我 赶紧提一下，这样我们就可以 在这个上下文对象下进入这个 因此你可以说 aate 就像 context。誓言 在这里我们可以看到我们可以获取用户身份 这将检查用户是否 是否经过身份验证，所以这里说 解析用户身份的承诺

2:00:40 如果凸客户端配置了 有效的 ID 令牌，这与 身份验证正确，因此它将获得 目前的详细信息 经过身份验证的用户，我们将使用 稍后在视频中 本节内容就到这里 我们在哪里了解了网络书籍 仅供参考，我会去 请访问此文件，在这里我将 添加评论我们在做什么 在这个文件中我们只需要确保 Web 钩子事件来自 店员如果是的话我们会听取用户的 创建事件，我们将保存用户 到数据库好的现在我们要 继续在 创建页面，而不是从 我们希望首先

2:01:27 创建一些帖子，然后我们就可以了 我们将建立主页，以便 获取这些帖子并显示它们 我们首先需要做什么 首先我们需要创建一个凸 获取帖子详细信息的函数 并将其保存到数据库中 点击此按钮，我们还需要 正确存储图像并用于文件呃 上传幸运的是，我们有一个部分，所以 如果你访问文档 应该可以看到我们有图像 上传，你可以看看 文档是如何完成的，但我会 尝试引导你完成它 用我们的方法和反应 native 和 Expo 主要用于网络

2:02:14 但正如你所看到的，它可以与 React Native 也是如此，所以我们将 在我们尝试之前，请访问 vs code 建造任何我想建造的东西 为您提供一些我们 将在创建页面中 在 Styles 文件夹下创建此文件 称为创建。风格。 TS 和我会继续复制所有内容 从我的源代码粘贴它 这大约有 100 行代码 让我们再看看 得到了一些进口的宽度，例如 尺寸以及样式表和 我们建造非常非常基础的东西 这与 CSS 有关，我们给出 ping

2:03:00 边框使内容居中等等 等等，所以这不是 CSS 课程 这就是为什么我会跳过这个 我们现在可以使用这些样式，以防万一 如果你想打出来让我展示一下 你整个 文件，这样你就可以暂停视频 真的很想把这个打出来 但这不是我会 做得好，那么让我们创建凸 函数，然后我们继续构建 首先我们需要的是 UI 因为这与帖子相关，所以我 在名为 posts 的文件中创建它。 TS 现在 让我们试试 为了建立我们的文件，我只需要

2:03:46 继续放大让我们得到模拟器 在右侧尝试构建 所以首先我将创建一个突变 你可以说，因为我们想 创建帖子并随时 与创造有关的东西，例如 更新或删除您想要的 创建一个你可以称之为 我将再次创建它作为 创建帖子，这将是 突变让我们导入它打开我们的 如果您反对并给出我们的论点 想要创建一个帖子你只需要 添加标题（可选） 假设 v. 字符串让我们导入 V 这可能是可选的，所以只需说 v. 可选，然后我们将

2:04:32 取另一个名为存储 ID 的字段， 当我们想要 一旦我们尝试删除帖子，就删除它 你实际上会看到这个这将是 我们现在不需要 理解它，但让我们继续 创建 Handler 函数 将会是一个异步函数 了解上下文，以便我们能够互动 利用我们的数据库，我们可以得到 争论好吧正如我所说的我们会 喜欢上传一些文件，为此我 将为您提供一个功能 大约三行代码 称为生成上传 URL，它是一个 突变，所以这正是来自 让我给你看一下文档

2:05:18 好的，所以这是完全一样的 我在其上方添加了函数 我们检查 身份验证，所以我们说上下文。 誓言获取我分配的用户身份 如果它 未定义或者为假值 我们只会说你没有授权，但是 否则我们将创建一个上传 URL，以便我们可以上传图像 好的，让我们进入 Handler 让我们在这里检查一下身份验证 并获取当前用户，只需说 恒流 用户，在我们这样做之前，我认为我们只是 需要获取身份，所以让我试试

2:06:03 得到这个 部分，我们将编写以下代码 在视频后面看起来好多了 我们将构建一个可重用的函数 检查身份验证，但 现在我喜欢保持简单， 给你更长的版本，好吗 我们只需获取身份，如果是 未定义，我们将抛出一个 错误，但否则我们可以得到一个用户所以说 当前用户，我们会说等待点 喜欢 语境。 数据库查询 带有索引的用户表，因此让我们 只需输入点并转到下面说 我们将按店员 ID 进行索引

2:06:50 回调函数 就像这样让我把它包起来然后我们 说疑问。等于店员 ID 字段 对身份做主题所以这 身份。主题将为您提供 店员身份证 好吧这说明这没有任何 因为我们只需要说 获得第一个 值没问题，我们可以添加另一个检查 如果未定义当前用户，我们可以 说找不到用户所以我希望这不是 目前我们不会做出任何令人困惑的事情 这看起来好多了 视频，但目前我们能做的就是 得到 用户让我这样说，好吧所以

2:07:39 到目前为止我们还没有做任何与 创作就像创建一个帖子，现在我们可以 继续尝试吧，我会 比如说创建帖子，比如说等待上下文 DB，如果我们想添加一些东西，我们会 使用插入方法，我们将 喜欢将其插入到帖子表下 我们可以添加字段，这样我们就可以 输入用户 ID，以便我们知道谁 是帖子的所有者，那么我们可以添加 图片网址，我们继续粘贴 但我们实际上没有图片 URL 目前我们怎样才能做好 我们基本上只是 在这里我会说 const image URL 等待

2:08:26 上下文做存储，我们会说获取 URL 我们要把这个嗯放进去。贮存 存储 ID 这将为我们提供一个图像 URL 我们可以说如果图像 URL 不是 存在我们可以抛出一个错误然后 我们可以说存储 ID 是 来自我们将要讨论的论点 加上标题，每篇文章都会 零个赞和零个评论 他们首先创造了所以现在我们的 如果我们不添加，代码就会对我们感到满意 我认为这张支票会不满意 因为 TypeScript 认为这可能 未定义或为空，这就是为什么我们将 添加这个检查只是为了让它高兴

2:09:12 一旦我们创建了帖子，我们就会 喜欢 增加帖子数量 用户权限，所以我继续 这条评论 增加 好的 增加 用户发布 那么我们怎样才能做到这一点呢？我们可以 说AIT上下文。 DB 而不是说 插入，因为我们想要更新一些东西 我们将使用补丁和我们 想要更新将是当前的 用户，这是我们要 说 帖子假设是当前用户。帖子加 好的，这就是我们刚才

2:09:58 完成，在这个函数的最后我们 可以返回帖子 ID，即 来自这里，假设是 con post ID 这是你得到的响应 我们可以返回 好的，这是我们的功能，让我 只需放大 我们目前所做的只是 检查身份验证，您知道 你不加这部分，我认为这 代码不会对你满意，因为 typescript 无法真正知道这 用户为空，哎呀，typescript 不行 真的知道这是否为空 数据库或者如果你真的有它 这就是为什么我们添加这些 if 检查，并且我们 生成图像 URL 并创建

2:10:46 发布后我们只需增加用户 帖子数减一，所以这是 我们需要的功能 我们将用这个来称呼它 从前端开始 创建页面现在让我们进入创建 页面并尝试构建 UI 在应用程序下的标签下我们有 这创造了。 TSX 文件让我放大 并缩小左边，这样我们 想要构建这个函数 我们刚刚调用了创建屏幕 [音乐] 好的，所以不用把所有内容都打出来 我会引导你完成 我保证会逐行解释 我们这里有一件东西

2:11:32 而不是让这个教程成为 10 通过这样做我们就可以拥有它 比如我们可以将尺寸减少两倍 对的你可以加倍 我们将从店员那里获取用户 我们要买路由器，因为 一旦我们创建了帖子，我们就会 将用户导航到主页并 那么每篇文章都可以有一个标题 就像呃，每篇文章都可以有一张图片 当我们选择图像时它将在 默认情况下，这个状态不是，所以让我们 继续导入使用状态 我想保持加载状态 这样我就可以显示一个加载旋转器 一旦我们说分享，这就会是真的

2:12:20 那么我们想得到当前 用户，但稍后我们会详细介绍 想从我们的 媒体库所以目前我们有一些 这台机器里的照片就在这台机器里 模拟器以及我们如何选择 所以基本上我们将使用 让我们继续打开这个包 我们的终端并终止我们的 XO 应用程序我将 说 MPX Expo 安装，我们只会说 世博会 图像 Dash 选择器，所以我真的不知道 如果你能完全看到它，但这是 那会是什么样子，以及任何时候 你就像任何时候安装

2:13:06 你会用到的 Expo 上的一些东西 这部分，但如果您正在安装它 常规软件包，你会说 npm 安装然后包名称so 请记住，这部分是 如果你得到 来自世博会的东西 生态系统，所以考虑到这一点，我们开始吧 继续运行这个好吗我为什么有它 在终端中运行两次 现在通过使用这个包我们应该 可以从我们的媒体中选择一张图片 现在我们有了图书馆 NPX Expo，然后我会按 R 键重新加载 应用程序我们去吧这就是我们

2:13:51 目前对于这个 UI 我 想要检查一下，所以我会 如果没有选定图像，我们 想要展示这种 UI 右边是容器，上面写着 tab to 选择一张图片，然后继续 使这个工作我将添加这个如果检查 在返回之前，我知道有一个 很多不同的事情，让我们继续 并导入所有内容，所以我们要 从创建文件中获取这些样式 我们将获得可触摸的不透明度离子 图标让我们得到颜色我会带你去 通过此代码，当我们按下 我们将要 现在调用名为 pck image 的函数 我会删除它 保存并进入创建页面

2:14:38 好了，这就是我们得到的，所以我们 有一个容器风格的视图，我们 有标题部分，其中有一个 箭头后退图标然后我们就有了这个 文字显示新帖子发布，然后 就像我们只是添加这个以便 如果你删除它，它就会居中 看起来是这样的，所以这是一些假的 然后我们就有了整个可触摸的 不透明度，所以这并不重要 你按这里，或者如果你按这里 总是会被按下，然后我们会 喜欢调用一个名为 pick 的函数 那么我们如何才能做到这一点 基本上为您提供这个 再次，我会带你走 通过它，我们就能得到这个

2:15:25 我们从包中获取图像选择器 刚刚安装，所以我会继续 我会说将所有内容导入为图像 从这个包中选择器这是 我们刚刚安装的东西 当我们按下这里时，我们将会 调用这个函数 提前启动图像库和 我们接受的媒体类型将是 但是你可以获得现场图像 照片和视频我会去 通过该项目中的图像，您将 允许编辑和纵横比 将是一对一的，你可以改变这个 和质量我们只会减少它 压缩我们的图像，如果它 没有取消我们将设置我们的状态 让我们保存，在这里我实际上

2:16:13 控制台记录所选图像的内容 选择该图像并打开 终端让我们继续 呃，按这里，我们去我们的媒体 如果我说取消，则选择库 什么也不会发生，但如果我们尝试 选择一张图片，假设现在选择我们 可以看到这是文件 已选择 好的，我们将使用这个呃确切的 URL 可以将其保存到我们的 凸锉 存储好的，现在我们知道如何 使创建页面工作，因为我们有 选定的图像，如果确实没有 运行，我们看到这个 UI 这里说 创造这正是我们现在所拥有的

2:16:58 让我们继续构建这个 UI 看起来就像 这个嗯所以当我们喜欢的时候我们选择 我们将要看到的这个 UI 我们看到这个标题组件 然后我们将预览图像 如果我们真的想要的话也可以改变它 然后我们会写一个标题 但这有一个问题 为了解决这个问题，我们有一个 组件，但首先我想 给你看视频，问题是什么 所以这就像让我告诉你当我们 尝试在这里写一条评论，我们可以看到 键盘溢出输入权 我们无法真正看到它，就像我会按 我们去那儿我们看不到它 我也遇到同样的问题

2:17:45 能够修复它，谢天谢地，我们已经 组件而不是 VI，我们 将使用键盘避免视图 来自 React Native，所以打开它 然后关闭它，然后我们将添加 一些道具让它正常工作， 就像我们可以检查平台 让我们继续导入平台 会说行为将根据情况改变 如果用户使用的是 iOS 或 iOS 上的 Android 它将与 Ping 和呃一起工作 Android 它会根据高度来工作 我们可以像这样赋予一些样式 这是容器和垂直 偏移，然后它就会再次改变 现在取决于平台，如果你问

2:18:31 我你怎么知道所有这些值 基本上我只是测试了一下 在录制此视频之前 在这里面我们将有我们的 整个用户界面，所以我会在这里 看看我们把它 关闭，它只包含此内容 容器作为样式让我们构建 标题现在我将把我的标题放在 去这里，这将是一个可触摸的 我想获取不透明度 这粘贴它，我们你通过它让 我把它纠正了 这里我们有一个可触摸的不透明度 按下我们将重置我们的状态 如果我们处于

2:19:18 加载状态，然后我们有一个图标 是接近的轮廓，再次它将是 颜色会根据 然后我们有一个文本，所以基本上 我们正在建设这个部分，我希望 那么在新闻发布会上我们将 调用这个函数 我们马上就能建造 我们将要使用的加载状态 活动指标来自 React Native，所以让我们保存一下 如果你说这是我们的用户界面 就像回去它实际上会带你 如果再次选择图像则返回 你现在应该可以看到这个 UI 我们确实会经历这样的 活动

2:20:03 指标所以我希望这是有意义的 远低于我们所在的标题组件 去建造一些其他的东西 是一个滚动视图所以让我继续 此组件关闭并导入 它来自 React Native，我们可以添加一些 现在的样式为什么这是一个滚动视图我 我们将立即向您展示 构建了整个 UI，所以假设它 弹跳将是假键盘 应该坚持标签将被处理 我们想要一个 具有一些样式的视图，以及此视图 我会去这里，假设你会 喜欢有一个 wi 组件，这将

2:20:49 采取风格 可以说风格或者风格我应该说 如果你想要的话，这就是 El Dynamic 要添加动态样式，您可以使用 就像这样，我们将要说 获取样式内容，如果我们在 如果我们处于共享状态 加载状态我们将添加这个 风格也使得 UI 看起来像残疾人，那么我们想 添加图像部分，请让我走 前方和 导入或添加它，我们就可以了 从 React 中获取图像 本地的好吧所以不要得到它 从 React Native 我觉得我会得到它 来自世博会图片所以我会说

2:21:35 导入呃图像 来自 Expo 图像的组件，所以我们有 那个组件或者我们有那个 我认为我们应该安装它，所以 我将再次打开我的终端 杀了这个，清理了这个，我会说 MPX Expo 安装 Expo Das 图像现在我们为什么要使用 Expo 图像 组件是因为这个包给出了 您可以使用图像组件来制作图像 确实进行了优化，所以它就像图片一样 我们有 xjs 的组件，所以基本上 这是出于性能原因，所以我们将 继续获取世博会图像，我们有 添加了这部分，我们展示了 选定的图像这些是 SL 手指

2:22:20 我们有，然后我们有这个 按下更改按钮，我们将 再次调用相同的函数 让我们保存打开我们的终端 开始 应用程序我会按 r 或者也许我 应该按 我没事，应该重新启动 让我们尝试选择一张图片 好的，我们可以看到图像已经 显示我们可以改变 它正如预期的那样工作， 因为我们有这个编辑通过我们 基本上可以编辑

2:23:06 好的，下面是这个图像部分 我们想添加输入部分，所以我 想再次获得代码 并在这里引导你完成 我会发表评论，比如说 图像 部分，这里我们将输入 部分让我们粘贴它我们将 获取文本输入组件剩下的就是 几乎是同样的事情，所以没有 没有理由把这些都打出来 再次从头开始，我们展示 用户个人资料图片，我们基本上可以 写一个标题，那么为什么我们使用 一个名为滚动视图的组件

2:23:51 因为就像这里我认为我们看不到 但是如果我们有 多行让我尝试添加 我们可以在我们的 手机，我们甚至可以添加像偏移量 相信需要抵消嗯比方说 内容偏移量我不知道 50 必须是字符串吗 说点道具 所以我真的不知道如何使用它 因为说实话我还没用过 好的我们应该给 X 和 Y 相信好的X假设零将是 但是，让我们说 100，所以你可以看到我们有一些

2:24:38 抵消，就像我刚才说的 和你一起学习 今天我是怎么学到的 你把鼠标悬停在这里我刚刚看到这个 X 和 Y，当我有 50 的时候，所以在这里 错误我我刚刚看到这个 X 和 Y 和 这就是为什么我意识到有这个 X 和 Y 字段，所以我继续 就说你会 100 好吧，只是因为这个卷轴 视图组件我们可以做到这一点 像这样工作，所以我们就从这里开始吧，我想 我还需要X场我会做到的 是 零我们基本上可以添加更多的东西 滚动到这里，其实并没有 按预期工作，但在您的手机中

2:25:23 你可以想象用你的手指你可以 基本上滚动它就能看到整个 查看好的，这就是我们所构建的 对于现在的 return 语句，当我们说 分享什么都没发生，让我们只是 媒体称实际上什么也没有发生 因为我们实际上没有函数 为此，我们现在就尝试构建它 所以这是一个短暂的暂停， 我想提一下 我正在录制这个 因为我们有一些 潜在的问题，所以第一件事 首先如果你想看键盘 在模拟器中输入这个 你需要按下 CommandShiftK 键 突然间你会看到 键盘，但现在我们仍然有这个 键盘溢出的问题 我们认为我们已经

2:26:10 通过使用此组件解决了该问题 但并没有完全解决问题 所以我找到了解决方案，而不是使用 20，我们选择100，现在就保存 让我们尝试看看它的实际效果 我们有 100 像素的偏移量，我们 可以看到正在运行的 在 Android 中我们不需要添加 任何偏移量，因为默认情况下 键盘将被避免，所以你只需 对于 iOS 来说，需要记住这一点 具体来说，好吧，那是某事 我想说的是，保留这个 让我们继续看视频 所以我们需要找到这个按钮 份额将在此之下 可触摸的不透明度让我们看看它在哪里 好的，就是这个，我们要去

2:26:57 添加此 onpress 句柄共享 函数，让我们继续 首先尝试添加此功能 首先我们需要得到生成 呃上传 URL 函数 我们在这里创造的东西 突变，在凸函数中你可以说 如果你想使用它，请使用变异 你可以说 API 做任何文件 就是这样，在帖子下面我们有这个 突变，我想称之为 生成上传 URL 和在同一个 我们可以获得创建帖子功能的方法 所以我只会说创建帖子，这是一个 突变，这就是我们说突变的原因 在视频的后面我们会学到

2:27:43 关于查询，我们会说使用查询，但是 现在它是一种突变，并且在 帖子我们将其称为创建帖子 这就是我们所拥有的，然后在 处理共享功能它是某事 我们需要构建 const 处理 share 是一个异步函数 首先让我带你了解一下 先说说如果有的话 没有选择图像则返回 这个函数不做任何事情，但是 否则我们可以打开我们的 TR 猫 TR 捕获 声明，只是说我们在 加载状态所以我们只需说设置是 分享是真实的，那么我们将 通过调用此方法获取上传 URL 突变正确，然后我们需要得到

2:28:31 通过上传我们的文件获得上传结果 为了完成这项工作，我将 得到一个包裹，让我们杀了它 这清楚了我会说 MPX 哎呀让 我让它全屏显示 MPX Expo 所以在这里 是整个包名我只是暂停 观看视频并查看我的笔记 因为我记不住 但我们去了那里，它被称为世博会 文件系统让我们继续安装 通过使用此包，我们将能够 上传我们的图片真的很喜欢 高效且干净让我们开始 应用程序按 R，这样它就会 重新加载它，在这个函数中我们

2:29:17 想要获取上传结果 我将在下面粘贴此内容并走 你通过它我们需要得到文件 系统作为导入，就像我们 已经做过 所以我们把所有内容导入为 文件系统来自此包，并且 使用这个我们可以上传一个 URL 右键或上传图片至此 URL 我们有我们要上传的东西 这是选定的图像我们的方法是 发布这是我们的上传类型 基本上有这个二进制内容 如果 meme 类型是 JPEG 图像，那么我们可以 继续，只需检查状态，我们将 如果状态不等于 200

2:30:05 这意味着某些事情失败了，但除此之外我们 可以从此上传中获取存储ID 结果然后我们可以调用我们的突变 因此需要等待创建帖子， 我们将添加我们的字段 有存储 ID 以及 标题，如果一切都完成了 我们可以成功地让用户 将其推送到主页，假设 斜线标签，我们可以 基本上只是说控制台日志错误 分享 你可以用更好的方式处理这个问题 但这就是我离开的方式 最后我们会说设置共享将是 错误，我们要么成功，要么失败

2:30:53 无论哪种情况，装载国都应 错误，好的，让我们保存并测试一下 希望你没有真正 对这个包感到困惑，这就是 我们可以轻松上传图像 使用 Expo 上传文件，这是 Expo 提供的其中一个套餐 你出局了，好吧，我们走吧 提前选择一个 图片我会说选择这个，比如说 第一的 [音乐] 发帖哦，假设是第一篇帖子并分享 我们有 第二，一旦成功完成，我们 被带到主页让我们加倍 检查我们应该有的帖子

2:31:40 顺便说一下，我不知道 为什么我们两次遇到同一个用户 看起来我们有一个 bug，我们 去修复但是我们可以看到 该用户还有 1 个发帖权限 在帖子下面我们可以看到这是 发布，我们可以进入我们可以的文件 看看这个 如果你把鼠标悬停在这里，我想 这将给你 预览所以我认为它给了我 预览，但现在它没有，但你 可以看看我们刚刚 安装它 好的，这就是我们存储的内容 我们的凸存储，所以这就是我们可以

2:32:28 创建帖子让我可以快速行走 向您介绍我们做了什么以及如何 它从头到尾都有效，所以 首先，当我们访问这个页面时，我们点击 这个如果检查我们说是否有 不是选定的图像，请显示 这个用户界面，当我们点击这个时， 基本上调用一个名为 pick 的函数 图片 图片 即将推出 我们的图像库将允许我们 选择图片，我们有一些道具 添加我们自己的定制，如果 图像选择成功，我们接下来 用它来设定我们的状态所以我会去 现在我们有了 选定我们不会击中的图像 这个如果检查，但我们要 命中这个返回语句

2:33:15 向我们展示这种用户界面 当我们点击这个按钮时 调用此句柄共享函数并 这里我们调用两个不同的 我们已经拥有的突变 在此文件中创建这些的是 生成上传 URL 我们刚刚得到这个 从文档中并添加了我们的 身份验证检查，然后我们有 我们自己的创建帖子功能，一旦 我们再次检查身份验证 获取图片 URL，然后创建帖子 在我们的数据库中包含这些字段 然后我们增加用户的帖子数 没错，这就是我们所做的 然后保存这个文件

2:34:03 这个功能我们基本上是 消耗这些突变，并且 我们使用的一个包叫做 文件系统这是来自 Expo 这使我们能够上传漂亮的图像 很容易，而且真的很容易使用， 如果一切顺利， 将用户带到主屏幕，所以我 希望我们所做的一切 这部分很有意义，你可以暂停一下 观看视频并分析代码库 5 到 10 分钟，一旦你 准备好了，我们可以继续下一个 部分，我刚刚意识到我们有 与用户相关的错误，所以我 不知道为什么我们创建了这个用户 我曾两次认为这永远不会发生

2:34:50 嗯，当我们开发的时候，我们得到了 这个问题，但我们继续删除所有 用户，我会删除所有帖子 我们有，让我们尝试注册 再次确认 如果正在发生，则不会发生 我们只需要调试一下，所以我会去 进入我的 模拟器我们需要退出 从这个账户，让我们尝试签名 向上 所以我们刚刚注册了 看到用户在这里让我们刷新一下 我们应该把它放在清晰的仪表盘上 好的，我想 注销并再次登录

2:35:37 在这种情况下，它不应该真正创造 这 用户好吧，所以我们并没有真正得到这个 我们不需要刷新它，因为 凸函数默认在实际中起作用 时间到了，我们试着创建一个帖子 所以我这样做只是为了调试 目的只是为了确保相同的 未创建用户 两次好的，所以我们收到了帖子，但是这个 呃，没有再创造它，只是 更新了帖子数，所以我真的不 知道为什么我们之前得到了同一个用户 两次，但现在它正在工作，嗯 好的，所以就这样吧 本节内容现在让我们继续

2:36:23 主屏幕将 成为我们的 feed，因此我们希望构建 下面的这个标题部分 故事，然后我们想获取 数据库中的帖子 让我们开始吧 我们将用凸函数构建查询 一旦我们构建了 UI，我们 继续获取帖子，所以 首先，我将讨论凸面 这篇文章文件，我们想 建立一个查询，假设 export const get 现在，这将是一个 查询，因为我们想要获取 一些数据我们会使用突变来 更新一些数据或创建和删除

2:37:08 但呃查询将用于获取一些 数据现在我们可以用同样的方式添加 但我们真的不需要 添加我们基本上想要获取所有 因此，我会 只需放置一个 Handler 函数即可 这将是一个 Asing 函数 我们将把上下文放在第一位 再次论证我们可以得到 但我们真的不需要它 为了这个功能，我们继续 尝试构建逻辑，以便 所以在这里我们尝试得到 当前用户所以我们可以做的是复制 并将其粘贴到这里这将检查 如果用户通过了身份验证，它会得到 当前用户现在不需要执行 一遍又一遍，我们可以继续前进

2:37:55 把它拿去，让它可重复使用 功能所以我将把整个东西剪掉 访问我拥有的用户文件 我的凸函数，我会创造 那个辅助函数所以这里不是 将会是一个突变或查询，这是 基本上是一个异步函数 喜欢称之为 验证用户身份，让我们尝试 粘贴此 好吧，我们把整个逻辑 如果 没有错误，但唯一的事情 我们缺少的是背景 我们可以得到一个论点，但是 将会是这样的，所以它可以

2:38:41 可以是查询上下文，也可以是 突变上下文对吧，所以让我只 抓住这个 突变上下文好的，我们是 从生成的服务器导入它们 让我们再尝试保存它一次 我们在这里做的是完全一样的 我们这里有的东西所以我会删除 我们所拥有的一切，因为我将 调用我的函数 get 经过身份验证的用户，我将 然后我会将我的上下文添加到其中 这会给我带来 当前的 用户好的，所以这里是一个上下文

2:39:28 从突变开始，现在我们将 采取完全相同的 但这次这个背景是 就像来自查询一样，这就是为什么 我们说类型可以是查询 上下文或突变上下文所以我希望 这很有道理，就像我想去 真的很慢，只是为了确保 我们开始熟悉凸 一旦我们理解了这一点，我们就可以吐口水 这些功能好吗现在 我们得到了我们想要的当前用户 获取所有帖子所以只需说获取所有帖子 在这里我们可以说 const posts 将是 等于等待 [音乐] 语境。

2:40:14 我们想查询我们的帖子的数据库 如果我们真的没有 我们真的不需要知道 只需添加诸如索引之类的内容 等等，我们希望得到 我想要订购 按降序排列，然后 只是说收集 一切都好，所以现在我们已经 让我们添加帖子让我们添加检查 我会说如果 帖子。长度等于零，我们会说 返回并空数组 然后我们终于可以继续了 如果你认为这是 我们需要的整个功能 错了让我告诉你为什么如果你悬停 在帖子中你可以看到我们有很多

2:41:01 不同领域和最 重要的是图片的 URL 正如标题所示，但有一些内容 如果你只是采取 看看这个帖子你真的不 了解我们是否已经喜欢它 并根据我们需要的 因为取决于那个领域，我们 将其显示为字段，如果我们 已经将其添加到书签中，我们将制作它 也要填满，对吧，我们只需要 把它变成不同的颜色，让我们 继续尝试实际构建它 部分所以不是返回帖子 我会立即回复帖子 一些正确的信息，让我们尝试构建 我会继续说增强帖子

2:41:50 以及用户数据和 相互作用 状态好，所以我们说反对帖子 信息，我们希望在 promise.all 因为我们要运行 数组，所以我只需进入数组内部 我会说帖子。地图我们想要 获得每一个 帖子，我用异步包装它 像这样的函数，比如说异步 发布并调用此 Arrow 现在我们真正想要的是 我们是否想获取帖子作者 首先，如果你看一下

2:42:36 发布你只有你没有的用户ID 确实有作者形象或作者 我们需要获取用户名权限 这样我们就可以在 UI 上显示它 我们要去啊头使用这个用户 ID，然后我们将得到 帖子作者，所以让我把这个打出来 我们会说你想发表的作者 说等待 语境。 DB doget，我们会说 邮政。用户 ID，因此这将提供 我们是帖子作者，然后我们会 想检查一下我们是否已经喜欢 发布或不发布，所以说等待 语境。您想要查询的数据库 我会从这里的likes数组中

2:43:23 继续说索引，如果 你记得我们有一个这个的索引 通过用户和帖子，我们将获得 查询，基本上我会说如果查询。 等于这里的用户 ID，即 当前用户 ID让我给 空间，然后我们会说等于我 我觉得这应该在里面，我们 基本上要添加其他字段 比如说帖子 像这样的ID等于这个帖子 ID 没问题，我们会摆脱这个东西

2:44:09 想要得到第一个结果，所以我会 只需说得到第一个即可 给我们一份类似的文件 假设 const 就像好的，如果这是 存在意味着我们已经喜欢它了 让我们保存它已被格式化，所以在 我也想检查一下我们是否 是否已将帖子加入书签，因此这是 完全一样，但我们正在走向衰落 书签表，然后我们会 喜欢实际返回一个对象所以 下面我会说 我们希望得到每一个 关于 theost 的事情，但最重要的是我们 我们希望增强它，所以我们会 想添加作者信息，所以我就 说作者对象，我们将在其中添加

2:44:55 作者 ID 帖子作者 doore ID 然后 我们将添加 即将发布的用户名 作者。 用户名呃让我们得到它，最后 我们想展示一下 作者如此发帖 作者。图像好然后最后 如果我们 已经选了或者没有选，假设是 El 并且是 现在已添加书签，就像是一个对象一样 我们想把它转换成 金条，我们可以添加两个银行

2:45:40 运算符，所以这是一个基本的 JavaScript 你可以记住的技巧 有了这些， 全部的 文件正确让我就把它变成 全部的 屏幕缩小，以便你可以看到 整个函数，所以我们得到了 当前用户我们得到了所有帖子，如果 它是空的，我们将返回一个 空数组，然后我们想 增强帖子，以便我们能够 实际提取作者信息 以及我们是否已经喜欢该帖子 如果我们已经将其添加到书签 取决于此，因为我们将更新 这 UI，我们基本上是这样做的

2:46:26 我们使用了我们创建的索引 之前是的，就是这样 我们所做的就是回报 包含此功能之外的信息的帖子 现在是时候继续前进， UI 然后调用该查询，所以我将访问 假设这是文件 让我让这看起来像我们将要去 在应用程序标签下，我们有这个 索引，我会删除我们 这里有唯一的出口 按钮我们仍然会保留这个 在最顶部退出，我们将 现在保持这种风格 在上面我们想添加标题 这部分

2:47:12 我们有徽标和注销 按钮，让我们看看如何做到这一点 工作我基本上会复制并粘贴它 它大约有五行代码，并且 我们需要添加一个文件让我 继续提供给你，所以我 只会说饲料。风格。 TS 我会的 从 theab repo 获取这个，如果你 想把这个打出来我可以给你看 整个文件，这是最长的一个 我们 这样你就可以暂停视频并拍摄 看一下 但我认为我们真的不需要 所以在这里你可以拥有整个

2:47:59 文件好的，我现在就保存，我们走吧 提前导入样式 不是来自誓言风格，而是 比如说饲料 样式好，然后我们将导入图标 以及颜色让我们保存并 看看输出，好的，这是 正是我们得到的嗯我会打开 我的终端并重新加载 所以你可以看到文本是 有点不同，为此我们 使用带有 jet 的标题 大脑单声道介质我们真的没有 如果你看一下，请安装此字体 资产让我展示这一点，这样我们就不会 确实安装了这个字体这是

2:48:45 我们稍后会做的事情 视频如果你看不到它 像这样突出显示，忽略它 我们将分几步安装它 好的，现在让我们 继续前进，让我们继续建设 我们要构建的标题 故事部分和我们的应用程序中 故事部分不会真正发挥作用 但我还是想实现它 使用硬编码数据，这样你就可以 看看如何实现这种 计算机组件正确所以我将进入 我将创建这个东西的组件 假设故事在 TSX 下进行，并且 常数我将为您提供 Moog 数据。

2:49:33 TS 文件，所以我会继续获取它 文件，所以我们有大约 50 行代码 对于故事，每个对象都有一个 ID 用户名头像来自 unsplash 有 story bullion，所以 无论是假的还是真的，这是一对 我们周围有不同的故事 现在让我们保存其中八个，然后 故事组件让我们尝试构建它 这是一个基本函数，我们可以得到 来自 feed 的样式。我们得到了 几个不同的组件 反应原生，然后我们有故事 类型是 TypeScript 特有的，我们 只有 UI，没有任何逻辑，只有一些

2:50:20 用图片和文字来设计样式，这样我就可以 保存它，让我们继续尝试 构建剩余部分，因此在此之后 我想添加一个滚动视图 视图，比如说滚动视图组件和 我会解释为什么我们要使用它 首先，我只想说 显示让我真正复制它，所以它 显示垂直滚动指示器，我们没有 真的很想看，所以我就说 那么我们想添加 故事部分我将继续保存 这个，我们进去吧，我会说 故事让我们粘贴这个我们要去 从模拟数据中获取故事 归档，让我们了解每一个故事

2:51:06 现在让我们保存它，这是 我们拥有的，在这里你可以再次看到 我们只是说不要显示滚动 如果你说的是真的，那么这个指标 所以它没有刷新，我只能说 重新加载好所以我不知道你是否可以 看到它，但看不见 其实还好，就像通常那样 应该是这个滚动指示器 底部，我们试图隐藏它 现在我已经在手机上用过它了 测试确实显示出来，但是 我不知道为什么这里没有显示 当它是真的时显示出来，但在你的身体上 手机这实际上是可见的，

2:51:53 我认为因为父母有错误 它 原因不，但这是 垂直的，好的，记住这一点 如果你在物质层面上实现它 手机上你会看到一个滚动 底部的指示器，如果你 如果是假的，它就看不见了，我会 将其保留为 false，以便 底部滚动条永远不会显示 水平方向这就是 现代社交媒体应用程序确实如此 以下是今天的故事和以下 滚动视图但仍在父视图内 我想显示我的帖子，这样我们 想说的帖子。每一个地图 单篇文章显示文章组件，但是我们

2:52:40 想要创建帖子组件 我们还需要获取帖子 获取帖子很容易，因为我们 已经创建了我们的查询，所以我可以说 const posts 将等于 use Query 我们会说 api。发帖并获取动态 帖子没问题，我们可以添加加载 状态也一样，所以我只会说如果帖子 等于未定义，并且如果查询 等于凸函数中未定义，这意味着 它处于加载状态，好的 记住，如果它是未定义的 将处于加载状态，如果它 为空，这意味着没有值，所以

2:53:25 假设在这种情况下我会 喜欢返回一个加载器组件 我们将在一秒钟内创建 假设 帖子。长度等于零 我们想返回 占位符我只想说没有帖子 找到了，这是我们 将只在这个文件中使用 为什么我只滚动到最底部 并创建该组件，基本上 这是带有文本的技术视图 表示尚未发布帖子，现在我们将 构建加载器组件 将在多个场合使用 所以我把它放到 组件文件夹，所以只需说加载器。

2:54:12 TSX，让我给你造型 是一个非常简单的组件，我们有一个 我们只显示大型活动的视图 指示器好的，我会保存，我们回去吧 尝试导入这个，然后我们会 喜欢 创建帖子 组件，所以一会儿我将删除 我会说如果这部分是 真的，让我们看看我们会看到什么 好吧，这将是酒驾 加载状态这就是我们将看到的 假设这部分是真的，如果我们 他们没有任何帖子 数据库中我们将看到这个文本 你可以随时改变它并 好多了，但我还是把它留着 现在让我们添加这个帖子

2:54:59 组件到 UI 中，我们希望 为此创建一个文件 在组件下所以只需说 邮政。 TSX 和假设 我们想在那里建立一个哨所 组件，这将需要 该帖子作为论点或作为 我应该说对，所以我们就 得到帖子，在这里我们想做 现在打字稿很高兴，我只需要 说我们要得到一个帖子 可以是任何类型，但在几个 分钟后我们将把实际类型和 为了不忘记，我会添加一个待办事项 所以我只想说添加实际类型 在视频的后面和第一个 我想做的就是 feed sles，所以我会继续导入它 然后我们来构建 UI，然后

2:55:46 构建功能 所以在 return 语句下面我会 只需删除此文本，然后我就会 喜欢用风格来添加风格。波斯特 首先让我们构建帖子标题 我只是添加一条评论，以防万一 你想从 源代码，所以我们将有一个 VI 组件假设它将具有 风格即风格。 post 标题和这个 也是类型保存，因为它能够 查看该文件并阅读其内容 在这个视图中，我们首先要 放个链接，我就说 链接，你可能会问为什么 想象一下当我们收集到这个部分时

2:56:35 它应该带我们到这个的简介 用户权限，所以我们要 继续添加链接，比如说导入 Expo 路由器的链接和 H 现在我们只输入斜线用户和 slash1 23 稍后在视频中我们 实际上现在让它工作这不是 真的很高兴，但我们只能说 现在我们将把用户带到 我不知道，比如说通知 Tab，为了使这个工作正常进行，它应该是 看起来这样可以正常工作， 然后在这个链接下我将有一个 可触摸的不透明度，我们将在其中显示 让我导入这个图片，我们就有 图像 您可以从 Expo 导入它

2:57:21 在这种情况下，我们将 使用 Expo 图像，这样我们就可以 缓存它并使其高效运行 我们有来源，即帖子。 作者。图像样式内容适合 转换，然后缓存策略和 然后我们将显示帖子作者 用户名，所以让我们保存它，我会 打开我的模拟器，我们继续吧 导入帖子并保存，希望我们 应该能够看到我们的第一个 帖子我们还没有内容 但我们可以看到作者是谁，然后 下面我们想提出这个观点 某物 否则我认为仍然在视野之内，但是

2:58:06 下面的链接所以我会说呃显示 删除按钮，但我们只想显示 如果我们是该帖子的所有者，那么 我会再添加一个 Todo 修复它 稍后好的，我就保持这个样子 现在我们只能说我们将有 三 可触摸的不透明度点 离子图标椭圆水平，我们 如果我们 帖子的主人，我们将看到 删除按钮，让我给你展示一下 以及它看起来会是什么样子，所以我们 将会有一个可触摸的不透明度 这个垃圾大纲所以我会删除它

2:58:51 把这个带回来我们去这是 那看起来怎么样，我可以注释掉这个 我们将使它变得动态 几分钟后， 我们希望将这一观点付诸实践 图片为帖子图片，所以我将继续 得到 图像所以它是完全相同的东西 这就是为什么我没有把这个打出来 基本上获取帖子图片 URL 和 我们抓住了这一点，我们开始吧，这是 我们之前分享过的帖子 然后在下面的部分我们想要 把帖子动作放在这里，所以我会 喜欢我的后期行动 将成为我们可以

2:59:37 喜欢或者我们可以添加评论 书签等等，所以我会 想提供这个部分 大约 10 行代码让我保存并 我会带你了解一下 所以我们有一个观点，这是父母 查看我们给出帖子操作的位置 左边是 这两个按钮好，所以我们只显示 硬心轮廓然后聊天气泡 如果我能正确概述，那么我们有 书签轮廓 右侧面板，因此在此视图之后我们将 喜欢喜欢喜欢在此视图之后我们 想把帖子 信息好的，所以我们继续 查看点赞和评论的数量 所以我再次想粘贴它

3:00:23 大约有 10 行代码，我会 想带你了解一下，这样我们就可以 已经看到一些数据所以这里我们说 第一个点赞这篇文章的人 如果有标题的话我们就会说 然后显示作者信息 然后我们只需说查看所有两条评论 在视频的后面我们会把它变成 实际评论数量，然后我们 只是说 2 小时前，但现在有一个 问题如果你能看到我们只需要 继续滚动才能看到 一切都在这里溢出 使用标签栏并使其工作 我们可以滚动到顶部 实际上它会在索引中。多伦多证券交易所 我们将进入这个滚动视图 我们有这个父滚动视图

3:01:10 将添加此内容容器样式 从底部我们只给出 60 如果我们滚动到最后，现在就填充 我们仍然可以有 60 像素的呃像 填充，这样我们就可以先拥有这个区域 这只是注意到我们不能真正 看清一切吧 溢出，所以这是另一件事 在使用滚动时，你可以记住 查看组件，现在我们继续 进入帖子。 TSX 制造这些 功能在我们喜欢的地方工作 评论并添加书签，这样我们就可以 将从 like 函数开始 但在我们处理这个待办事项之前 我们想添加实际的 输入而不是只说任何所以我

3:01:57 将删除此行，然后我们继续 将其作为帖子道具 这将是我们 喜欢创造，所以我们在这里接受 一篇帖子让我们继续吧 这篇文章已经延长了，我们只是知道 从获取 feed 帖子中我们 返回一个对象，获取所有 帖子所包含的字段，例如您知道的 你在屏幕上看到的一切 最重要的是我们有作者 作者作者信息然后我们 有两个不同的buan值，所以我们 想添加这些，以便我们的帖子 prop 是 um 类型保存，而不是 因为我们已经知道了所以把它打出来 我会粘贴这个并引导你 通过它，每个帖子都会有一个 ID

3:02:43 这是帖子 ID 的类型，您可以获取 此 ID 来自凸生成的数据 模型你也可以说这是 是字符串类型，但如果你想 真正清楚你在做什么 应该说嗯这应该是实际类型 帖子 ID 右侧，然后位于顶部 这些布尔值我们希望 有这样的作者字段 好的，考虑到这一点 现在应该可以正常工作了 只需说发布，你就可以看到它是 键入“save”，然后就可以在“author”下面继续 现在你可以得到所有这些字段 认为这是 我们开始抱怨了，所以它说了 可能是未定义的，并且能够修复 我会去这里，让我缩小

3:03:31 左手边所以当我们得到 帖子作者说这可能是 但我们确实知道如果我们有 我们知道，一篇帖子的作者是 好吧，我就用 括号里我只想补充一个问题 标记或感叹号在末尾 说这永远不会为空，我们将 总是有一个帖子作者，好吧，让我们 保存现在我们确实没有任何错误 好的，我希望这是有意义的，我们有 刚刚处理了我们的 待办事项，我们可以构建我们的类似功能 所以我将保存这个文件，因为 喜欢的帖子与我将要发布的帖子相关 进入凸文件夹并访问 posts 文件，我们将添加一个 函数调用，比如说像我一样切换

3:04:20 我把这称为切换，就像 因为这既能处理喜欢，又能 不喜欢所以我们可以说这是 像这将是一个突变一样 我们想要得到弧和 这里我们只需传递帖子 ID，这样 我们知道我们试图 就像这样，就说它会是类型 V ID 的帖子我们去吧，我们会 就说我们要有一个 Handler 函数将是一个异步箭头 函数，我们将得到 上下文以及 弧线好，现在让我们尝试构建 函数逻辑所以首先我们 将获得目前 经过身份验证的用户，因为我们有 这个函数我们已经可以调用了 那么我们想检查一下我们

3:05:07 我已经喜欢这个帖子了，所以我会 只要说 const existing，我们就可以 进入点赞表，我们 如果我们得到一个 结果意味着我们已经喜欢这个 然后我们就可以收到邮件 所以我们在这里就得到了像我们 只需检查我们是否已经喜欢它 现在是时候得到真正的 发布，所以我们只说上下文数据库。盖特 并传递帖子 ID，我们只需添加一个 如果检查帖子是否存在，我们将 说找不到帖子，现在取决于 这个现有的呃现有的状态我们将 只需说 e 或者我们愿意 删除类似的，或者在其他情况下我们 想要添加一个

3:05:54 就像好的所以如果它存在那就意味着 我们已经喜欢我们现在喜欢的地方 删除我们的点赞所以我只能说等一下 上下文数据库。删除所以基本上继续 从点赞中删除此点赞 点赞表，然后我们想要 继续减少数量 点赞此帖子 好的，我们只需修补这个帖子， 这是我们想要的领域 更新，所以这就是 如果检查，我认为我们也可以返回 false 表示现在处于喜欢状态 是假的，所以这意味着它不太可能 然后在其他情况下你会喜欢 基本上添加一个

3:06:40 正如你所看到的，我们将添加 用这个将点赞添加到点赞表中 用户 ID 和这个特定的 发布，然后我们会增加 现在点赞数加一 还有一件事我们想做 这不是我的帖子，我想发送 通知吧，所以我就说如果 这不是我的帖子，让我们创建一个 通知以及我们如何检查 我只需提供代码就可以保存 为了获得这种格式，我们基本上 如果当前用户 ID 不等于 如果这不是我的，帖子用户 ID 正确 在通知下发布 表格并创建通知，这里 字段类型会像那里一样

3:07:25 我们去 最后仍然在伦敦证券交易所的声明中 注意我们在 F 中如何返回 false 如果现在我们想回来 真的，让我们看看真的，这将 表示呃，现在喜欢这个，好的，所以 这就是整个函数，信不信由你 看起来不是太多，但实际上 这非常简单，好吧，只需 如果你真的想看看这个 暂停视频然后我们就好了 现在让我们进入这个帖子。多伦多证券交易所 文件并尝试调用它 我们刚刚创造的突变，所以我 我想要先有一个状态，所以我会 只需说 const 即可检查 我们已经喜欢这个帖子了，或者不喜欢它

3:08:11 喜欢并设置是 喜欢这个就等于使用 [音乐] 状态让我在那里正确输入 我们去，我们只会说 post dot 是 喜欢，我们现在可以创建一个函数 我只会说 const handle 就像我们 点击此图标我们想调用 这个函数，我们称之为异步箭头 我们将要构建的函数 逻辑一秒钟，我们还可以保持 跟踪点赞数，所以我会在这里 只是说喜欢计数它将是一个 國家邮政。喜欢即将到来 从道具上可以看出我们现在 让我们去看看这个可触摸的

3:08:57 心形轮廓图标的不透明度 但我们希望 动态的所以我会把它剪掉一秒钟 我会说，如果光线充足，我们愿意 显示硬图标，但如果不喜欢 那么我们想展示这颗心 概述让我们保存我只会这样做 是真实的，这样我们才能看到 声明我们去了，然后我们想要 改变颜色，所以我会 喜欢去 下面，而不是白色 颜色我们只会说如果它是光 应该是原色，即绿色 否则它会是白色的 点击“保存”即可获取 格式化此可触摸的不透明度

3:09:43 按下应该调用如下句柄 函数，所以我们继续尝试 建造 所以首先我只想说 给我一个 try catch 块，然后我会 说 AIT 切换就像这是 我们想要消耗的突变 所以我们可以说使用 帖子下的 API 下的突变 我们去拿开关就像让我们 说 con toggle 就像现在我们可以称之为 正如你所看到的，这是预期 一些道具等待切换，就像它应该的那样 好的，我们只是要发送邮件 ID 假设帖子 ID 等于 发布 doore ID 然后我们

3:10:31 想更新状态，我只需要 说设置是喜欢的，现在这是 这是真的还是假的 我真的不知道我们应该 来自此函数的响应和此 这实际上是我们在 if 中所做的 和 lse 语句我们只返回 当前状态为真或假， 这里我只说 const 并赋值 一个名为 new 的变量被喜欢， 我们只需设置喜欢它，然后我们 可以继续更新点赞数 像这样在抓捕中你可以处理它 我会用其他方式 将其保存为控制台日志，以便我们保存 希望这能奏效

3:11:16 我也想用这个点赞 计算实际的用户界面，所以我会去 继续前进，找到帖子信息部分 我不会在这里写这篇文章 稍微停一下，我会说如果 腿数大于零，那么我们 想看看实际 否则我们只会看到 之前的文本现在让我们保存，我会 喜欢通过以下方式重新加载此应用程序 在终端中按下 R 键，好的，所以我会 继续这样我们走了我们有 点赞，然后我们再确认一下 在这里我们可以看到我们的帖子获得了一个赞 如果我们访问点赞表 可以看到我们刚刚收到一份文件我们可以走了

3:12:03 继续尝试解锁它这应该 是 实时删除，我们开始吧 帖子现在没有点赞，这意味着 一切正常，并且 我们只是喜欢我们自己的帖子，我们不应该 真的有任何通知吗我们开始吧 现在让我们测试一下通知 功能，我会继续喜欢 退出，因为我将尝试注册 使用不同的帐户，因此目前我们 数据库中只有一个用户 哪个是这个，我们注册一下 这个，我会喜欢其他的账户 发布一切顺利，所以看起来我们得到了 错误呃出于某种原因让我们尝试

3:12:48 重新加载我们的应用程序这是什么东西 我们刚刚开始开发或者 所以我们要看看这个错误 很快就会发生，否则我们可以 现在继续前进，我们可以 查看我们没有的通知 真的有任何文件所以我登录了 以不同的帐户登录，我会尝试 点赞此用户的帖子 应该创建一个通知，这样我就可以 就像实时我们得到的那样 通知是这样的 接收者这是发送者，我们 可以看到这个帖子现在有一个赞 我们也在数据库中找到了该用户 好吧，看起来一切都是 如果我们尝试不喜欢它，现在就可以工作

3:13:34 显然我们并不想删除 通知，所以我会取消点赞， 这不会被删除，这就是 我们希望现在你可能 询问好吗所以如果这不是我的帖子 我到底为什么会看到这个删除按钮 所以这只是一个图标，这就是我们 编码它是硬编码的，我们将 显然要修复它，但要知道 目前如果你点击它没有任何反应 所以这是我们留下的待办事项 接下来我们 可以添加常见的 功能所以在我们开始编写之前 我想要的常见功能 稍事休息，然后谈谈 我们目前面临的性能问题 然后我会给你一些 你应该记住的资源

3:14:20 在使用 React Native 时首先 首先让我们看看问题 以及我们如何才能优化它们 它将位于主屏幕下方 这就是我们所拥有的，它位于 应用程序标签索引。 TSX 文件没问题，所以它 与帖子相关，因此 现在我们继续，剪掉这个 我们暂时忽略这一点 我们也会解决这个问题 就放在这里并评论 就像它不存在一样，我们 正如我刚才所说，我会添加它 第二，这里的问题是什么 我们现在有了真正的社交媒体 应用程序可能你会有 成百上千的帖子和什么 此时滚动视图

3:15:08 你通过它进行映射它实际上会尝试 一次性渲染所有元素，这是一个 问题，因为您的应用程序可能会 崩溃呃因为没有足够的 内存，所以我们应该使用 调用了一个名为 flatlist 的组件，因此 这是我之前提到过的 如果你还记得 教程，现在是时候使用它了 所以这实际上只是 渲染屏幕上可见的内容 想象一下我们有 100 个帖子，但是 目前我们只能看到一个 看不到其他人，所以它只会 渲染你所看到的，正如你 滚动它将渲染剩余部分 所以目前我们只有一个帖子

3:15:54 但想象一下，如果我们在数据库中有 100 个帖子就是这样的 滚动视图尝试渲染所有内容 而 flatlist 则只 渲染你在屏幕上看到的内容 我会把这个带回来呃也许 故事 部分，我们将尝试修复 所以让我们保存，所以我们要 优化帖子部分，但现在 如果你在社交中思考，故事 你将拥有的媒体应用程序 在这种情况下最多说20个故事 我认为使用滚动视图完全 很好，因为如果你渲染每一个 你的故事立刻 应用程序不会崩溃，但是你

3:16:40 对于这种情况仍然可以使用平面列表 那么再一次怎么样 滚动视图所做的就是渲染 你拥有的一切 尽管如果它们在 屏幕，但在另一个 手什么flatlist只呈现你 屏幕上显示的内容 正如你所见，正如你所知道的 元素继续并渲染它们 这实际上不会引起任何 延迟或其他什么，但它只是改善 在我们尝试之前 实现它我想把它作为一个 注意我会进入溃败，我会 创建一个节点。 MD 文件，以便您可以 将此作为参考 本教程让我直接复制它

3:17:27 从我的笔记中粘贴，缩小左侧 手边粘贴这个所以这些是 我在帮助下准备的笔记 人工智能只是为了让它看起来非常干净 又脆又脆，但我刚刚再检查了一下 你在屏幕上看到的一切都是 完全正确，所以我们就来回顾一下 你应该使用 FL 平面列表 性能至关重要，因为平面列表 仅渲染当前可见的项目 屏幕，节省内存， 提高你的表现，当你 有很长的数据列表，所以基本上 我们在帖子里有什么 当我们渲染时 潜在的大量数据集，因此 可能是你的 feeds 搜索结果 消息列表等等现在我们

3:18:15 你可以读剩下的，但基本上你 想要使用滚动视图时 内容适合记忆，所以当你 显示少量固定数量的 我希望 这很有帮助，我们将添加更多 当我们经历这个的时候 部分好的所以现在我们知道 理论，但我们到底该如何 正确实施这一点，所以我们要 继续我想做的事，忽略它 故事现在完全结束了 我会再剪掉它然后把它放进去 就在这里作为评论，以便 目前来说，这并不会困扰我们 让我们只考虑存款，因为我们 不会使用滚动视图 基本上可以继续删除它

3:19:01 完全使用组件 称为平面列表，所以我们称之为平面列表 从 React Native 导入，这是 将成为自封闭组件，并且 让我们看看如何使用它 做类似的事情 帖子。地图或故事。地图我们会说 这是您想要的数据 绘制地图，对于每个帖子，我们该怎么做 想要做我们想呈现一个 项目，所以这将会 我们将在回调中获取物品 在这里你可以看到你是否按下控制键 空间中你可以看到索引项和 我们希望得到该项目 对于我们想要的每一件物品 返回一个帖子组件，这里

3:19:49 我们将继续添加 喜欢这个帖子是因为这个帖子 组件希望你添加一个 post 属性 但现在我们并没有真正添加密钥 对此有一个特殊的道具 称为密钥提取器，我们希望 添加唯一字段，例如 ID 和 那么我们想添加这个先前的 呃，我认为我们称之为表演的道具 它应该是第一个 是的，因为这与我们的帖子有关 真的不想展示垂直 呃，滚动指示器，所以我只想说 如果是 false，那么我还想添加 这个内容容器样式 给予一些爱抚

3:20:34 好的，所以我只想保存 让我们看看我们会得到什么 好的，我们来看看我们所拥有的 再检查一下，我会重新加载我的 应用程序，这样我们就可以看到我们的帖子 就像以前一样，但现在很多 更加优化和高效，但现在我们 这些故事不太对劲 为此，我们可以继续添加另一个 道具所以我只说列表标题 组件，为此我们想 返回一个 com 返回一个名为的组件 就说故事部分吧，你可以 随便叫什么都可以，但这就是名字 我现在要尝试 剪掉这部分并删除这条评论我 将继续创建此组件

3:21:19 所以这将是一个箭头函数 我们可以立即归还我们所拥有的 剪掉它就好了所以我认为这是 去 就像这样，我们仍然可以继续 像这样，但我想让它有点 更适合初学者，所以我们只能说 返回此 部分，然后粘贴并删除 评论好的所以基本上我们有一个 功能组件，我们返回 带有故事的滚动视图，我们这样说 将会处于水平 方向不显示指示器和 这就是风格，好吧，一切 应该像预期的那样工作 以前，但现在一切都很多 更加优化和高效，因为我们

3:22:04 如果你真的想要的话，使用平面列表 您仍然可以使用平面列表来实现此目的 一个，但是因为我们只有八个 故事我认为这完全没问题 使用滚动视图，这是第一个 我现在想提一下 继续谈别的事吧 所以我认为在视频的开头 我已经讨论过可按压 组件与可触摸不透明度 到目前为止我们只使用了可触摸 不透明度是有原因的，所以我会 喜欢只保存此文件并进入 并尝试添加一些注释，以便 你可以在源代码中使用它 作为 好吧，让我复制所有内容 我会告诉你区别 在我阅读这个文件之前

3:22:52 什么都只是知道可按压是 在更复杂的情况下使用 需要更复杂的交互， 可触摸的不透明度用于更简单的 就像简单的淡入淡出效果，这是 我们目前使用的东西我们真的不知道 有任何高级互动，所以我们 我们主要使用可触摸的不透明度 但你可以看看整个 我又检查了一遍 你在屏幕上看到的一切都是 完全正确，但基本上你 想用 Pressel 做复杂的 相互作用状态，并且它们都是 用于按钮目的且可按压 稍微新一点，就像 你将会看到的旧代码库

3:23:39 可触摸的不透明度越来越多，而且 有一个更简单的 API，所以我认为 我希望这也是有意义的 还有一件事我想 讨论哪个是图像组件 这是来自 React Native 的 我认为这个文件 使用来自 反应原生，还有另一张图片 来自 Expo 的组件 我 我想我已经提到过，但是 我就给你一些 更好地解释这一点的注释 基本上你会再次使用 当你需要一些像一点点 更高的性能和缓存

3:24:25 我们的案例，因为我们有高质量的 图片这是一个社交媒体 我们总是希望有一些应用程序 缓存以便图像立即加载 我们大部分时间都在使用 Expo 图片 时间，你应该使用 React Native 当您需要基本图像显示时的图像 使用最少的配置，当你 正在尝试保持应用程序包大小 更小一些，这里还有一些边缘 你可以看看这个案例，但是这个 你应该保留的一般想法是 考虑到所有这些节点 我们想谈谈一些事情 其他关于字体的内容 因此目前 这可能不是你所看到的呃 因为我正在运行演示应用程序 这也得到了字体大小和字体

3:25:12 从缓存中获取家庭信息，所以在你的情况下 让我快速地向你展示一下 如果我们去这里如果我删除这个那么 您可能正在查看字体大小 就像这样，但就我而言，这是 来自缓存，让我们尝试 实际上安装它所以当我第一次 开始使用这个应用程序时我没有 现在真的有这个了，我想要 去向你展示这个资产文件夹 我们有一些字体，这是 Expo 附带的默认字体 安装，但我们想添加 我们自己的自定义字体，所以首先我想 给你 URL 让我复制它 来自 jetbrains 即 jetb brains.com

3:26:00 低功率脉冲电源 一旦你进入这个网站 你可以下载即将推出的字体 给你一个拉链，然后你 想找一个文件，所以我有 已经安装好了我就给你看看 哪一个让我试着复制一下 将其粘贴到字体文件夹中，这样 这真的很简单，你可以继续 解压该文件夹并获取此文件 这是 JetBrains 的单一介质。 ttf 现在 我们只是明白这一点，但这并不意味着 我们将它安装到我们的应用程序中 需要加载它，我们将进入 我们的布局，所以让我回到 下划线布局是我们的根

3:26:45 布局，这里我们想加载 这 字体，在我们加载它之前我想 谈论某个概念或某件事 称为启动画面，你可能会 问那到底是什么，所以当你 正在尝试登录你的应用程序 对，所以当你打开它 一瞬间你会看到右边的图标 可能在 Facebook Instagram Twitter 在任何应用程序中你都可以将其命名为 你一瞬间就看到这种 屏幕，这就是我们所说的启动画面 屏幕加载屏幕基本上如此 为此我想写一些代码 这将处理启动画面 我们会说，直到我们的手机 加载后只显示启动画面

3:27:33 你知道，一旦我们的手机充值了 显示实际的应用程序内容，所以我 希望我已经用清晰的方式解释了这一点 让我们看看如何做到这一点 所以我们先说一下拼接 屏幕场景让我们从 Expo 导入它 路由器我们只会说防止自动隐藏 异步，然后我们加载我们的 我们可以使用字体来实现 钩子，我认为这会是 比如说来自世博会 导入字体哎呀，假设使用字体 它将来自世博会 字体 Expo 字体好吧那么这是 我们希望看到的字体路径 加载所以首先名称被称为喷气式飞机

3:28:20 大脑单声道 中等，这是我们的路径 喜欢导入它，所以我们就说 要求根据资产 字体，这是完全相同的文件 我们刚刚安装了它 给我们一个变量，假设 const 我们将解构它 字体已加载，所以这是金条 我们想检查一下，比如说 加载然后你应该继续 其实就是说Splash screen。隐藏异步 所以一旦我们的手机加载完毕，我们就会 隐藏 SPL 屏幕，以便我们可以 实际应用 内容，我们真的不想添加

3:29:06 就像这样，但我会继续 并用回调函数包装它 它被记忆和缓存了，我们走吧 提前从 React 导入使用回调 这是布局根视图，我们 将它传递到我们的安全区域视图 组件，所以我们假设在布局上 喜欢调用这个函数，如果你 想知道这是什么意思 基本上它是在 Mount 上调用的 布局更改为“好的，我们开始吧” 前方和 现在保存，你应该能够看到 如果你有和我一样的字体 看不到继续吧也许杀了你的你的 应用程序或按 R 键它应该重新加载 现在我们就能看到字体了

3:29:53 一瞬间我只需按下 R 就像我们可以看到启动画面一样 这是图标哦我们只需按下 这再次成为世博会的标志 你可以从资产中看到它 图像，它是 Splash icon.png 现在你可以完全使用它 当然，但是我已经准备了一些东西 如果你想得到它，我会去 提前删除这个我只想说 删除这个，我会提供一个 我已经准备好了，所以我刚刚 拖拽中断它再次被称为 Splash Das 图标这是实际图标 我已经准备好了，如果你切换 您可以看到的状态栏可见性 这是建议的尺寸 1024 平方

3:30:42 你想买这个尺寸的 启动图标，如果你问怎么样 我是否打开了它它是命令转换 p 我会解决这个问题，这样它 不占用任何空间，所以让我们打开 在终端上我会按 R 希望我们 应该能够看到启动图标 但看起来我们不能，所以我会去 只需说出命令即可 C 终止应用程序并重新启动 好的，所以出于某种原因，这确实 不起作用也许它在缓存中 应该清除，让我们看看如何 现在解决这个问题，我会做的是 杀死我的终端并清除它 我缩紧左侧我想要

3:31:27 从头开始我的申请，但是 清除缓存，所以我只会说 npx 世博会开幕- C 希望这将清除缓存 你可以说 R 好的，我们仍然无法获得这个图标 不知道为什么 以前它对我有用，但是在 当它不 终止应用程序并重新启动它 再次，好的，所以它不起作用，我们走吧 继续前进，尝试寻找另一种解决方案 因为它没有按预期工作 让我们看一下文档 所以这是意料之中的事 基本上告诉我们不要使用世博会去 测试你的启动画面你应该得到

3:32:14 预览版本或产品版本进行测试 否则你可能会得到这个 我们刚刚遇到的冲突，所以我们 可以假设它将在 生产，然后这里有一些 关于启动画面图标的注释这是 您推荐的尺寸 这是我 几分钟前提到过 然后它应该是一个没有 透明的 背景，如果你想配置 你知道你应该的颜色图像 访问该应用程序。 Json 文件 关于你的各种配置 应用程序，以便您可以更改 您可以更改 Android 图标 所有设备，然后进行拼接

3:33:00 现在在我们的例子中，我们想要 实际上也改变了这些图标 这是 icon.png 以及 自适应图标.png 所以你可能会问 这是什么？这是主图标 对于我们的应用程序和自适应 图标也像同一个图标，但它 用于较新的 Android 设备，因此 较旧的 Android 设备将使用这个 iOS 设备也会使用这个 但较新的 Android 设备将会 使用这个自适应图标所以我 所做的就是准备这些 图标也是 与此相同，所以我想 只需复制此内容并再次粘贴

3:33:46 我想删除 icon.png 和 我将删除此自适应图标.png，因为 好吧，我就复制这个粘贴这个 再次说，这将是 图标.png 和自适应图标.png 希望这能成为我们的新图标 现在我们无法真正看到它 相信我，让我打开我的终端 并重新运行 首先我们应该按这个，好的，所以我 认为补给屏起作用了 让我再确认一下，好吗 我们的供应屏幕现在开始工作 如果我们看一下 世博会如果你按的话我们可以回去吗 命令 M 不，那不是正确的事情

3:34:35 让我把它带回来是命令 D 好的，我们可以走了 我们可以刷新一下吗 清除它并再次重新启动 我只是想知道它是否会 使用较新的图标，所以我会按 命令 D 来 好的，为什么它不起作用 我们回家吧，好吗，在这里我们可以看到我们的 图标也发生了变化，并且它正在运行 预计我会给你一些笔记和 希望我们能结束这一切 我将得到 关于

3:35:22 图标好的，这里有它icon.png 与自适应 icon.png 相比，这是 标准应用程序图标出现在大多数 设备它是您的 应用程序，这是推荐的 图像尺寸也是一样的 自适应图标和自适应图标已经 在 Android 8 中引入了 特定于 Android 设备，如果你 不提供这些图标，你的应用将 仍然有效，但它将使用暴露默认值 适用于专业应用程序的图标 肯定想包含这些图标 您的自定义图标就在那里 我们唱到我想要的最后一个音符 包括一些资源，所以如果你

3:36:11 想要找到数百个其他第三方 您可以访问 react 的派对库 本国的。目录，让我给你看看 这个漂亮 很快，所以这里有一堆 你可以选择不同的套餐 看看探索等等，如果 你想处理一些手势 是提供直观 应用程序中的用户体验 也有一个适合这个的包 您可以在 文档，这样你就可以添加 不同的手势，比如 P 标签旋转等等 我还想要一个包裹 提到哪个是 React Native 重新激活，您可以创建流畅

3:36:57 动画，让我们继续看看 在文档中这确实是 真的很常见就像常用如果我们 只需搜索 npm install react native 每周下载量已经结束 100万，即 疯了，你肯定想 在建造时记住这一点 应用程序，所以这些是一些 我想提及的资源 在我们结束本节之前 下期再见，让我们 继续实施共同 功能目前一切都 硬编码，最终我们 想要有这样的模型 当我们点击这个评论图标时 我们可以看到之前的评论，我们 可以添加我们自己的评论，所以让我们

3:37:42 看看我们如何才能让它先发挥作用 首先我想补充一下 凸函数，这样我们就可以 在几个 分钟后您就可以将其发布到帖子中。 TS 文件，但我实际上想把 将其放入评论中。 TS 文件不存在 真的很重要，但这是惯例 我想使用或不使用约定 但这只是我的偏好，所以让我们 创建一个函数来添加评论 可以暂停视频并尝试通过 然后看看我的解决方案 假设这将是一个突变 好的，我们想添加一些数据，如果 你想添加我们需要的评论 一些论点，比如内容 这是评论本身，它将

3:38:29 是字符串类型，比如说 v. 字符串 我们应该从凸函数中导入 V 那么我们希望得到 帖子 ID，以便我们知道在哪个帖子上 我们正在添加评论，然后我们 想要有 Handler 函数将采用 上下文以及我所指的请求 争论不请求我们继续 打开我们的函数并尝试构建它 所以我想获取当前用户 在我们的函数中，假设 await get 经过身份验证的用户并传递上下文 作为论据，因此我们希望得到 这篇文章让我们说一下背景。分贝。

3:39:14 getet，我们将输入帖子 ID 这将返回帖子本身 让我们添加一个 if 检查，我们只会说如果 找不到帖子，我们抛出一个错误， 顺便说一下，你也可以返回一个凸 错误我想我还没有提到这一点 但这也是可用的，那么我们将 喜欢创建评论本身，所以 我们只会说进入评论 表并尝试插入数据 这个 这是评论作者 这个 这是帖子，这是内容 这将为我们提供评论 ID 我怎么知道当你悬停在 它会告诉你回报 语句返回 新文档好，所以我只需分配 这是我们想要的评论 ID

3:40:00 增加评论数，所以我 将继续编辑并发表评论 我们正在更新我们将使用补丁 这是我们想要 更新，这是我们 想更新正确的帖子。 评论加一，那么我们想 如果这不是我的，则创建通知 所以我将继续添加我的 if 检查 如果发帖我会说。用户 ID 不相等 我想在我的 ID 中插入 通知，属于评论类型 这是相关数据， 一天结束时我们可以归还这个 来自此函数的评论 ID，因此这是 我们所拥有的整个突变 我们想添加的另一个 该文件用于获取评论

3:40:47 这将是一次询问，所以我继续 只需说 export const 获得注释即可 将是一个查询让我们获取这个查询 从我们的进口，我们希望得到 传递一些参数，以便我们 知道我们将在哪篇文章中 参数，这将是帖子 ID 这是一种呃帖子，我们只是 我们的处理程序 函数让我们抓住上下文 oops 上下文和 论证并尝试建立逻辑，以便 我们会说反对 评论让我们说等待做 上下文等待为什么这不开心好吗 应该是这样的语境。数据库查询

3:41:37 带有索引的评论表，所以我将 只需说点与索引，如果你 记住我们有一个名为 IND 索引 发布，所以我们只需添加我们的回电 函数比如说查询。等于这个 是领域，我们希望 收集所有 帖子，我的意思是那里的所有评论，我们 这将给我们所有人 评论现在还有一件事我们 如果你认为我们 应该只是说回复评论让我 告诉你我的朋友你错了因为 在评论中我们没有关于 用户我们唯一拥有的是 美国用户 ID，但在评论部分我们 想要显示用户图像为 以及用户全名权利，我们

3:42:24 只需继续获取这些信息 好的，让我把这个提供给你 这是我们已经做的事情 之前对了我们刚才说的帖子 信息现在我们只会说评论 信息，所以我们得到了所有的评论和 我们将继续绘制每个 评论，每条评论我们都会点赞 获取即将拥有的用户 全名以及图像字段 好的，这就是我们的查询 我们将在几分钟后使用 现在让我们进入正文。 TSX 我会 喜欢创造一些不同的 各州允许共享一切，就像 点赞数我会复制这个 我们将有一个叫做 评论计数，假设设置我认为

3:43:11 我们应该说评论很重要，而这 将会发布。 com 评论就像 然后我想要一个 更多状态只是为了检查评论 模型是否可见，所以我会 只需说显示评论，默认情况下 如果这是 是的，我们想展示一个模型，我会 就像我只需滚动到 文件的最底部，就在这之前 我将添加一个名为 评论，比如说评论模型和 这是我们要 只需一秒钟就能创建 将获取帖子 ID，假设为帖子。 ID 这是可见的吗？或者我们 将取决于这个称为 show 的状态 评论，当我们关闭这个呃的时候

3:43:59 我们关闭这个模型这个状态应该是 错误，所以这是我们的函数 通过，最后一旦评论 已添加，我们希望增加 评论数量，所以这里说 设置评论数让我们看看 应该是 S 好的我现在有一个类型 这应该让我们高兴，但我们 没有真正拥有 为什么它会崩溃让我们来看看 组件并创建这个 假设 TSX rnf 保存 并尝试将其导入到 文件好的，我们继续尝试 构建这个 Commons 模型组件 首先我想添加我的道具作为我的

3:44:46 输入正确，所以我只需输入评论 模型只是一种类型，所以我在这里 只想复制并粘贴所有内容 这四个值，所以我们将得到 帖子 ID 的类型为 发布 ID 然后我们就可以分割了 关闭和评论时添加功能 那么我们继续说这是 我们现在喜欢的 D 结构对象 这应该是类型保存让我们获取所有 所以这是特定于 TypeScript 的 我们希望有一个国家 跟踪评论本身，以便当 我们正在输入我们希望 这个状态，以便我们可以更新它， 最初它会是空的，正如你所看到的 然后我们尝试获取查询，

3:45:34 只说 const 注释，我们只说 使用来自 conx 的查询，我们只需 说 API。评论。获取评论和这个 正在进行的争论 这将是帖子 ID 我们希望有我们的突变，所以我 基本上重复这个，我会说 添加评论这将是一个使用 突变 就像调用 API 注释一样 假设添加评论，这需要 我认为这不是我们 如果你 记住当我们调用它时我们会通过 那些是正确的，所以这是 实际上传递这些论点并不

3:46:21 好的，考虑到这一点，我就 还有一个函数，比如说处理 在评论中我们假设这将是 现在我们有一个异步空函数 只需在 第二，现在让我们尝试构建实际的 UI，所以当我们点击这个时它应该 打开模型正确，但我们没有 首先有一个模型 让我们继续尝试构建它 对于一个模型来说，有一个组件 被称为模型，来自 反应本机和你放入的任何内容 模型变成了模型，所以让我们 只是尝试看看这将如何运作我们 会说这将可见取决于 在这个可见的状态下这个道具

3:47:07 我们会得到然后我们会喜欢 有一些不同的东西让我们 说动画类型将是幻灯片 它只会从底部滑落 假设这是透明的 说这不是假的而是真的 我们希望根据要求关闭 我们想添加我们的 功能正常，然后我们尝试 首先构建实际的组件 首先我想 键盘避开视图这是 我们之前提到过 基本上当我们想要打开 键盘我们希望这个输入仍然是 可见，所以我们用这个

3:47:53 组件，我会得到一些道具，比如 行为和风格让我们 说 平台。和风格我认为这个风格 将从让我加倍 检查它是否来自 feed Styles 那么我们希望有模型 标题让我们保存以获取此格式 我们将进入键盘避免视图 粘贴此内容并保存，然后尝试 导入我们的组件以便可触摸 不透明度将会出现这个关闭图标 让我们得到颜色，然后 评论标题所以基本上我们只是 现在构建这个部分，让我们尝试构建 其余

3:48:38 部分所以在这个观点之后我们只会说 如果评论等于 un find which 表示我们处于加载状态 我们想退回其他商品 在这种情况下，我们希望有一个 加载器组件将具有 这个呃活动指示器是尺寸 很大，然后我们想在这里 实际上回复我们的评论，正如你 可能会猜我们想使用 像平面列表这样的组件好吧所以如果你 记住我们有这个数据字段 我们只会在评论中说地图 并呈现项目以便每个评论继续 并创建或渲染评论组件

3:49:26 我们没有这个，但我们会 构建它并添加 项目作为评论字段，以便您可以 称其为正确但应该 明白你的意思 发送，这是我们收到的物品 然后我们想添加密钥提取器 所以我把它放在这里然后 我只给一些 样式到容器中，好的，现在让我们 尝试构建评论组件 是我想要创造的东西 在我的组件文件夹下，假设 评论。 TSX，这根本没有逻辑 比样式和 UI 更重要，所以我只粘贴

3:50:11 大约 30 行代码，让我们 看一下，这是使用日期 FNS 包让我们继续安装 所以就说一下 mpm 安装日期- FNS，所以我们将使用它来 格式化我们的日期，假设为 npx XO 并重新运行我们的 应用程序好的所以基本上这有一个 查看具有某些样式的图像，这将 以评论作者为例，然后我们有 你知道作者的全名 评论内容以及评论 时间，这将继续并格式化 距离，这样它就会说 大约 2 小时前 1 小时前

3:50:58 所以没有所谓的 1 小时 应该是 1 小时前，但你得到了 好的，让我们继续尝试 现在导入评论组件，我不 知道为什么这不是真的高兴 我认为这是因为我没有 导入了它，所以我们应该得到 现在让我们保存它 好的，我们继续构建它 我们只剩下一个视图 我只想说，让我们添加样式 这将是评论输入 我们要在里面放一个文本输入 所以再次强调，我认为这是一个组成部分 第一次使用 或者我不知道我们是否使用过它 是的，我想我们以前用过它

3:51:43 当我们 尝试添加标题，但基本上我们 得到一个样式占位符然后 占位符值的文本颜色 改变，这可能是多行的 就像在这之后我们只会发布一篇帖子 可触摸按钮 当我们点击它时，我们将 调用我们上面刚刚提到的这个方法 然后它将被禁用，如果 我们确实没有新的评论 内容，我们只是有一些额外的 现在我们收集的时候样式还不错 什么也没有发生，因为我们从来没有打电话 单击此图标时的功能 让我们找出它是哪一个 应该根据行动所以正确

3:52:29 当我们点击这个聊天气泡时 概述一下，假设在印刷机上应该 使这个状态为真让我们保存 希望如此 工作在那里我们可以看到我们的模型 对，就是这样，只是侧面 向下或像它刚刚从 底部 屏幕运行没有任何问题，所以 我们继续添加一些东西吧 但如果我们尝试发布它，什么也不会发生 再次发生我们没有 函数逻辑还没有建立，所以让我们尝试构建 我会尽力指导你 所以首先我们只能说 如果你没有评论内容