欢迎来到我的 React Native 速成课程
2025 年。在本视频中，你将……
从完全的初学者到精通
如何培养一个完整的全栈习惯
使用 React 从零开始构建追踪器应用程序
Native、Expo 和 AppRide。本课程
专为零基础初学者设计。
无论您是移动通信新手还是其他任何领域的从业者，
从 Web 开发或切换，
你将学会如何构建漂亮的用户界面，
创建不同的屏幕，管理状态，
连接后端，并创建真正的
移动体验，全部采用最
最新、最先进的工具。我们走
从……开始，一步一步来
基本功，逐步提升到……
功能齐全的应用程序，用户友好
身份验证，实时习惯
跟踪功能和简洁的响应式设计。
如今，React Native 仍然是其中之一。
最强大的框架
2025 年构建跨平台应用程序。
使用 React，你只需编写一次代码，即可轻松拥有你的 React 代码。
该应用可在 iOS、Android 甚至其他平台运行。
Web，全部具备原生性能。加，
有了 Expo 之类的工具，这种情况从未发生过。
更容易快速制作应用原型并发布应用。
它受到众多公司的信赖，例如
Instagram、Shopify 和 Discord，以及
背后有庞大的开源生态系统支持。
如果你是一名 React 开发人员，或者只是
移动端 React 入门
Native 是你下一步的最佳选择。首先，
首先，React究竟是如何运作的？
本地工作？嗯，就像我说的，它
允许您使用以下方式构建移动应用程序
JavaScript 和 React，但不是
它运行在浏览器中，也运行在真实的设备上。
移动设备。这意味着你拥有
可使用相机等原生功能，
GPS 等。它允许你使用单个
iOS 和 Android 的代码库
为您节省大量时间和精力
过程。现在，有几个核心问题。
我想要的 React Native 组件
各位，在我们开始之前请记住这一点
开始教程。我们显然
稍后我会详细讲解，但目前来说……
现在，我只想把它展示给你们看。
第一个组成部分是视图。以及
React Native 中的视图就像一个容器。
或者包装纸。把它想象成一个div
HTML。它用于布局您的应用程序，
内部包含其他组件。观点可以
可以设置样式来控制布局
用户界面，例如控制宽度、隐藏等
边距和内边距。第二
组件是文本，文本组件
用于显示，顾名思义
屏幕上的文字。可以这样想：
HTML 中的段落标签，但功能更多
字体样式自定义选项
颜色和对齐方式。第三个是
文本输入。文本输入组件是
用于直接从用户获取文本。
它就像普通的输入，但方式不同。
更适合开发者
经验。它主要用于物品
例如登录表单或搜索栏。和
最后一个组件是滚动视图。
滚动视图就是你
通常在网页项目中看不到，但是
这是一个允许您执行以下操作的组件：
创建可滚动区域
内容超出屏幕尺寸。现在，
这些只是其中几个核心部分。
我们将要使用的组件，但是
我们将更多地使用……
出色地。而且，为了创造我们的
在 React Native 应用中，我们将使用一个
强大的开源框架，它将
基于名为 Expo 的 React Native 框架进行开发。
Expo简化了开发流程
并允许您使用以下方式构建移动应用程序
无需设置即可使用 React Native
复杂的本地代码。它提供了一种
一套工具、库和服务
这将加快开发速度并使其
更容易测试和部署您的应用程序。
使用 Expo，您可以立即预览
您的应用程序通过应用程序使用您的手机。
无需任何操作即可调用 Expo Go 应用程序。
处理 Xcode 或 Android Studio。
您还可以访问设备功能，例如
摄像头、GPS、通知等等
开箱即用，无需任何额外操作
编写本地代码。你可以使用
功能强大的开发环境
快速刷新，让您清晰可见
您在模拟器或您的更改
实物设备。简而言之，世博会是
非常适合快速入门
React Native 和构建可以
无需在 iOS 和 Android 上运行
需要浪费时间进行设置。是
本次视频制作将使用 Expo 平台。
如果你想查看代码的话。
视频将在……
描述以及更多
我没有包含的高级版本
视频里有，但或许对你们有帮助
了解大规模 React 的运作方式。
原生应用可能看起来像这样。另外，如果你
你很喜欢我教授 React 的方式。
应该看看我的新 ReactJS 课程
适合初学者。已经快一个月了。
自从我发布了这门课程以来
反馈非常棒。此外，在
第一个月，我们有早鸟优惠。
定价。所以，如果你点击链接
描述中，您可以使用代码
前 100 名报名者可享受课程 20% 的折扣。
在本课程中，你将学习
所有与 React.js JS 相关的内容
你是新手，我会一路带你到终点
了解如何构建大规模应用程序
通过四个不同的大型项目。所以
如果你对此感兴趣，那就去做吧。
然后点击说明中的链接。
去看看吧。现在我们已经全部……
既然已经解决了这个问题，我们开始吧。
视频。好了，各位。现在我们
了解一些主要核心内容
让我们开始学习 React Native 的概念吧。
构建 React Native 应用程序
在我们的电脑内部。现在，为了
为了创建我们的应用程序，我这里有一些资料。
我在里面打开了一个文件夹
我选择的代码编辑器是 VS Code。
我想打开我的终端，
运行以下命令。我想跑步
npx
创建 Expo 应用。然后我要放一个
点将代表呃，我
想在 Expo 内部创建这个应用程序
我当前所在的目录
是我创建的文件夹。现在如果
你从未运行过这个创建 Expo 应用
之前发过命令，你可能会……
提示安装该软件包
正如你在这里看到的。这就是
创建 Expo 应用的版本
我正在使用。现在，如果你没有
软件包已安装，只需按回车键即可。
它将安装 CLI 命令，并且
开始设置您的应用程序。当
项目创建完成，您应该可以看到
这条简短的信息说你的
项目已准备就绪，您可以运行了。
请使用以下方法之一来完成您的项目
命令。就像我之前说的，当
你使用 React Native 创建一个项目
特别是对于世博会来说，嗯，你可以
你实际上正在创建一个项目，
可在安卓、iOS 和网页上运行
全部都是原生的。所以，你实际上可以看到
您的应用程序版本正在运行于
Android模拟器、iOS模拟器，或
呃，就是你实际使用的浏览器。我现在想走了
简要概述一下样板博览会
项目已生成。所以，呃，我想
谈谈不同的文件夹和
React Native 附带的文件
Expo应用程序，所以你已经有了想法。
因为正如你所看到的，它已经有一个
一堆不同的文件夹，而且它可能
一开始可能会有点不知所措。
现在，你应该知道的最重要一点是：
使用 Expo 的 React Native 应用是
与普通的 React 应用非常相似。
正确的？您可以看到我们有 package.json 文件。
为了管理我们的依赖项，我们的TS
因为我们使用的是 TypeScript，所以需要进行配置。
以及所有其他文件夹
在普通的 React 应用中可能会看到。现在是
问题是，这实际上并不是一个完全的
就像用 React 从零开始构建的项目一样。
本国的。当我们创建时，当我们运行
创建 Expo 应用命令，它实际上
使用默认设置创建一个项目。
模板。这个模板有一个
必要的样板代码，以及其他
对你来说必不可少的库
开发你的应用。所以，呃，很多
不同的套餐实际上已经存在了。
安装此模板的原因
应用程序。但如果我们可以重置它，我们
想。现在，为了测试一下……
样板代码是，我要运行
npm 运行 web。现在，为了让我
给你们看看样板内容
项目是，我要选择什么呃
我想运行的软件类型
申请已提交。既然我们正在建设中
我将在一个iOS系统上运行的应用程序。我
我已经有了Xcode模拟器。
已安装 iPhone 模拟器
安装到我的电脑里了。如果你
别这样，你必须自己安装。嗯，但是呃
如果你只想在网页上运行它，那么
也可以这样做。所以，我要……
运行 npm run iOS。你会发现它
将会启动一个使用 iOS 的项目。但
正如你所看到的，如果你没有它
iOS模拟器安装完毕后，它将
实际上，我给你提供一个选择。
安装不同的开发者
你需要的工具。所以，我要……
跑过来把“是”写在这里。它是
准备打开 Xcode。而你
即使我有 Axcode，也能看到这一点。
呃，这只是个旧版本而已。
我正在用这台电脑录制这段视频。
我们需要安装 iOS 组件。
嗯，它的最新版本是 8.86。
英国。所以我只需点击这里，下载，然后
安装完成后，它将开始安装。
iOS 的系统组件
模拟器。应该不会花那么长时间。
我把它卸载到这台电脑上了。
你们可以从中获得一些启发。
实际上，把它设置好了。但如果你正在使用
Windows 系统可以，而且你还有安卓系统。
Studio，你想运行一个 Android
您可以使用 Android Studio 开发应用程序。
模拟器也一样。如果你想建造
它适用于两种类型的手机，但是
你不想使用模拟器，我
建议直接在网页上运行。
而且，你会获得相关的经验。
稍后运行这些模拟器。所以，
我打算等它重新安装后再安装。
iOS 18.4 模拟器，我一会儿就回来。
完成后。现在我已经成功了
已安装模拟器。所以我可以就
再次运行 `npm run iOS`，你可能会运行
这个问题就在这里，它会给你……
同样的短信说你需要
实际安装。但你看，如果
此后此消息仍然出现
安装 Xcode 时，您可能需要……
运行以下命令完成安装
命令。所以你要把这个命令复制过来。
然后你关闭终端。你
运行它。它会要求你登录电脑。
密码。你只需要运行你的电脑。
密码，嗯，现在如果我们运行 npm run
iOS 系统应该可以正常运行我们的产品。
iOS模拟器。它运行在 iPhone 16 上
专业。实际上，它会为我打开。
正如您在右侧看到的。我
我的模拟器已经打开了。我的一切
我所做的就是搜索
我刚刚安装的模拟器应用程序
我的MacBook电脑。正如你所看到的，
它已安装 Axo 应用。不仅
不仅如此，它还有你的名字。
app，即文件夹的名称。
现在，如果我点击这里的“关闭”按钮，这个
是我们的应用程序。我们的应用程序已成功开发。
跑步。现在，你可以看到这是
包含所有功能的样板应用程序
我提到的那些文件夹。但就像我
他说，这实际上只是一个模板
你可以以此为基础继续发展。
不过，既然我在教你们，你们就……
我们不想从零开始开发 React Native。
实际构建我们的项目并学习
使用此模板。我们想要重置
该项目处于清洁状态。
石板。为了做到这一点，我们有了这个
这是一个很棒的命令，我们可以在新系统上运行它。
终端调用 npm run
重置项目。当我们运行这个程序时，它
它会问我们是否要全部删除
将这些文件移动到另一个位置或将它们移动到另一个位置。
一。我其实不会写“不”。
因为那样它实际上会删除所有内容。
项目的部分内容是……
该模板的一部分。所以你看这里
它删除了一堆文件，而且
生成了一些文件
项目运行所必需的条件，例如
应用程序文件夹和其他两个文件夹
这里有一些文件，我会在后面提到。
第二。嗯，我们还有一个新项目
从零开始。所以我们实际上可以得到
开始了。那么，让我们开始吧。
应用程序文件夹是最重要的。
你项目的一部分。那么，我们开始吧。
连同文件夹一起。这是什么？
文件夹？应用程序文件夹也类似。
就像其他应用文件夹一样
类似 Nex.js 的框架。实际上
你的所有路线，意味着所有
您在页面斜杠屏幕上看到的那些
您的应用即将上线。现在，我们是
去谈谈导航和
创建路由。但你定义的方式
导航，您页面上的不同页面
你的应用是通过基于文件的系统实现的。
所以，我们将要创建文件，
这里内部的文件夹用于确定
我们的应用程序有不同的屏幕。
现在，你放入其中的每个文件
此应用程序将自动变为
屏幕。然而，有两个超级
此处默认包含重要文件
你需要了解他们是什么
是。所以第一个是
index.tsx。这是索引路径。现在
这个文件是我们应用程序的入口点。
它将在开发完成后执行。
服务器启动。默认情况下，我们在这里看到
它使用了一些 React 的核心功能。
我们提到的原生组件。
所以，就像我开头提到的那样……
视频，观看次数更多被认为是
就像普通网页项目中的 div 元素一样
文本更多地被视为一个段落。
标签或 H1 标签。现在，这个指数呃
这边的屏幕是主屏幕，
你的项目中已经有了，但是你可以
还可以创建其他的。现在所有
这些屏幕是由世博会定义的。
路由器框架。现在有几个
你需要了解的关于
React Native 中的导航和路由
以及世博会。所以就像我说的，这是一个
基于文件的路由，这意味着
在这个应用目录中，我们有
定义文件夹和文件以确定
我们有不同的路线和屏幕
将会拥有。现在他们全都
通过此布局文件绑定在一起
这里。这个根布局实际上是
共享实际上是我们定义的地方。
共享的 UI 元素之间
所有不同的路线。所以这
这意味着，例如在你的应用程序中，如果
您有一些您可能需要的用户界面元素
在每个屏幕上都像这样
或许可以设置一个不同的标签页，你知道的。
在它们之间导航，呃，那些东西
应该在所有方面保持一致
你会把它们放在不同的路线上
这边。现在，这边的堆栈在这里
代表你当前所在的屏幕。
所以，如果你曾经使用过 React，
过去你曾参与过某些项目
例如 React Router DOM 或类似的东西
Nex.js 也支持基于文件的路由，你
或许他知道我在说什么。这
这取决于哪个屏幕
我们已经进入，屏幕用户界面将会渲染。
这边以及我们周围放置的任何东西
实际上也会被展示出来。
所以我可以在这里输入一段文字，内容如下：
你好。如果我从呃导入文本
实际上来自 React
Native，你应该能看到 hello 应该
无论如何都要到场。现在的问题是……
呃，这里显示“你好”，但是
它就显示在最上面。我
不知道你能不能看到。
可能不会。也许如果我只是喜欢复制
然后把这段文字粘贴很多次，
你或许会看到它。呃，但它确实出现了。
堆栈上方。如果我把这个放在下面
在这里，你也会看到它会
如下所示。介于两者之间的任何东西
它们俩就是我们现在所处的屏幕。
它由以下方式代表：
堆。那么，我们如何创造一种不同的
路线或不同的屏幕在我们的
应用？所以，我们打算这样做
这样做就是我们要来这里
我们的应用程序文件夹，我们将创建
新增导航项。所以要添加一个新的
屏幕到这个堆栈，我可以来这里
到我们的应用程序文件夹，然后我就可以……
创建一个新文件。现在是……的名字
文件将决定什么
屏幕名称是：所以对于
例如，如果我想创建一个登录
屏幕，我可以直接做一个
登录.tsx。例如，如果我想
制作一个登录界面，我可以
只需做一个
登录.tsx。现在我可以导出
来自此文件内部的组件。所以我是
准备出口
默认函数。我可以给它任何东西
我想要的名字。但通常我喜欢的是
命名规则是：我给……命名
屏幕。所以登录，然后我输入
屏幕。然后，在这里我们需要……
返回某种用户界面。我们要走了
返回
屏幕上显示一些“我不知道”之类的文字
里面。我们可以放置任何我们想要的用户界面
想。现在我要导入这个用户界面。
这边。所以我要导入视图
和
来自 React 的文本
本国的。我打算写上“你好”。这
这是登录页面。现在当我保存这个的时候，
什么都没发生。我们仍然看到
我们的 um index.ts，对吧？此屏幕
这边，就是我放进去的任何东西。
在这里，你会看到它会更新成这样。
但是，我们看不到登录页面。
我们刚刚创建的。原因在于
那是因为在我们的根布局中
在这里，我们从未真正定义过这一点。
屏幕。所以，我们想做的是……
实际上，我想保留这个堆栈。
组件，但我们实际上想要……
比如它不会自动关闭。里面
在这里，我们将定义每一个
单个堆栈屏幕。所以就是这样。
你定义一个屏幕。你只要说堆叠就行了。
屏幕。你需要给它起个名字。所以
这里显然有索引。
我们可以创建这样的屏幕
早已存在，但现在我们只是
将其正式化。我们可以传递一些
选项。例如。呃，而且不同
您可以传递给屏幕的选项有：
例如，所需的名称
呃，你需要传递的道具和一个
还有许多其他可选功能。
现在它们暂时不重要，但是
你可能需要用到它们
未来。重要的是
知道你需要通过一个标题
每个屏幕单独对应。现在是家
屏幕将被称为家。和
你会看到这立即变成了
以前在家的时候，呃，甚至都没有。
编译。但如果我放别的东西
这边，现在顶部发生了变化。所以
这就是标题的目的。
是。现在我们可以定义另一个屏幕了
这边。而另一个屏幕则不是
将成为指数。将会是
登录界面。我们可以给它一个
还有其他名称，比如登录名。和
我们现在知道它的确存在。但是，再说一遍，
我该如何进入那个界面？嗯，
要进入那个屏幕，我们需要找到一个
到达那里的方法。而且由于我们
项目从索引路径开始，我们
需要一种方法通过索引来实现这一点。
路线。现在，为了在两者之间导航
屏幕方面，有两种方法。现在，
最以网络为中心的方式，你可以
想象一下，可以通过链接来实现。而且还有
实际上，这是一个你可以使用的链接组件。
使用 um Expo Router。现在，这个链接
这个组件非常简单。就像
你可能在某个链接组件中使用任何链接组件
一个普通的 Web React 库。你只是
拨打链接。你给他们放了某种东西
类似登录页面的文本，然后你还有
在这里传递一个 href 参数。所以 href 是
这只是通往你屏幕的路径。你呢
可以看到它已经立即提供了
我们有不同的选择，我们可能想要
使用我们项目中已有的资源。
具体来说，我们需要的是登录界面。
所以，我们可以在这里创建它。和
你应该看到我们现在有了这个
登录页面文本，但实际上并非如此。
看起来像个链接或按钮，对吧？所以，
我马上就给你们看。
如何才能让它看起来有点
稍加修饰后效果好一些。但
目前我们知道，如果我们点击
实际上，我们正在导航到……
登录界面。我们看到了用户界面
在此登录界面创建。我们也
默认情况下易于回溯
为我们实现的导航
无需担心任何事情。所以，我们
你可以看到我们是如何实际移动的吗？
应用程序的不同部分之间
无需担心。现在我该怎么做？
对这个链接进行一些样式设置
看起来好些了吗？嗯，你
可以应用与我们已有方法类似的方案。
这里提到过，对吧？有一种风格
这里有个你可以用的东西。我
可以过来，然后说“风格”
并应用一些内联样式。我可以
例如，把它做成一个按钮。所以
我可以把宽度设置成我不知道的数值。
大概200左右，然后是高度
就让它变成50吧。它要来了。
看起来有点怪异。我可以设置一个
背景颜色为珊瑚色。呃
实际上，这必须是一个字符串。和
之后它看起来就会像这样。
嗯，我会设置一些边框圆角，然后我会
就说是八吧。那么我也可以
文本对齐
到中心。我也可以就这么做
这个尺寸的宽度和高度实际上更小，
比实际尺寸小得多。类似这样的。
正确的？所以很明显，它看起来不像。
太棒了，但我只是给你们看看而已。
这就是应用样式的方法
正是如此。嗯，看起来会有点
更像是用户界面元素应该有的样子。
看起来像。现在有了另一种方法
方便你实际应用样式。你
您可以看到，这里有我们各种风格的款式。
查看并访问我们的链接。现在很明显，你
可以通过内联方式应用样式。
像这样的造型。然而，有时
你可能需要尽量精简内容。
在同一地点。所以你实际上可以使用
存在的样式表对象
来自 React Native，而不是 Expo Router。
抱歉。样式表。还有什么
这段代码位于你应用程序的某个地方。
通常在底部，您可以定义一个
样式对象，您可以使用样式表
创建屏幕样式表，
这意味着您可以定义所有样式
你的屏幕位于此对象内部。为了
例如，我们来截取一下这个视图，
正确的？嗯，这就是看到的景色。所以对于
首页，所以我可以说，呃，视图是……
我喜欢我们正在打造的这种风格，而且我
可以直接复制所有这些样式
直接把它们粘贴到这里，然后如果我
过来这里查看这个样式对象
而不是直接插入样式
我只能说，风格确实如此，而且会如此。
实际上使用该视图中的样式。
现在我也可以在这里做同样的事情了。
和
导航按钮。我可以创建一个导航栏。
点击这里，然后粘贴。和
那我就可以这么称呼它了。
样式.导航按钮。所以这就是你的方法
会在内部应用一些基本样式
你的项目。现在你可能会问
你自己没问题，但是当我使用应用程序时
那里，看起来可不是这样的。
没有导航按钮。那
看起来不像个真正的应用程序。真实应用
实际上有一些导航功能
像标签一样，就像某种方式为你
继续点击。通常在底部，
对，就是你点击的地方
在您的应用程序中，您可以创建不同的标签页。
导航。如果你想想看
Instagram、TikTok 或任何其他应用程序
你用的那些，它们都有那些小部件。
底部有标签，而且你实际上可以
使用该功能在屏幕之间导航。
那么，我们该如何做到这一点呢？嗯，就是这样。
这个概念叫做标签页。而且是
实际上对你来说很简单
在 React Native 中实现。我们现在的方式
我们打算这么做，实际上我们就要这么做了。
为了获得我们不同的屏幕
目前，它就是登录信息和
指数。我们将创建一个新的
文件夹。现在，这个文件夹将是
名为 tabs 文件夹。我们必须
请使用这里的小括号。
此标签页文件夹是一个特殊文件夹。
因为我们可以放置不同的屏幕
将它们放入其中并归类在一起。
只需把导航信息告诉他们即可。
屏幕底部，就好像我们有一些
有点像底部的标签导航器。
所以，我接下来要做的就是……
复制索引和登录信息，然后我
就把它们放进去吧
标签页文件夹。我只是要搬走它们。
现在我们已经收集了……
屏幕，所以我们才用这个。
这里用括号括起来，这是一种方法
以便我们表明这是一条路线
小组，我们实际上需要建立一个
这组路线的布局。所以我是
我要复制这个布局文件，我是
准备把它粘贴到标签文件夹里
这边。这意味着我们有
明确哪些是屏幕
存在于这个群体中。所以屏幕
该组存在的屏幕是：
我们之前已经创建过了。我们是
基本上是将它们合并成一组
我们的应用程序中将存在的屏幕。
现在我们要把这组人称为
屏幕上会显示标签页。正确的？这是名字
我们在这里创建的文件夹。
所以，在标签页内部的布局上
文件夹，我们可以就这么放着。
呃，我们其实可以改名。
而不是根布局。这是标签页。
布局如下。但是布局文件夹
具有根布局的布局可以是
改为显示两个
单个屏幕，它实际上会
只需显示或渲染选项卡组即可。
所以在这里我们要把它改成
标签名称要与以下内容匹配：
我们在这里创建的文件夹的名称。
然后你立刻就会看到这个名字
这里是页面标题。
已经改变了。原因在于：
因为拥有一个
一组屏幕的标题。正确的？所以
实际上，在一组屏幕中，我们没有
想显示此标题
特定堆栈屏幕。所以我打算
把标题删掉，我就走了
设置名为“header shown”的属性
错误的。现在我们准备开始我们的
底部标签导航器。那么我们该怎么做呢？
那？嗯，我们来想想。我们
希望这部分用户界面元素出现在所有页面上
标签页上存在的路线
文件夹，对吧？所以，既然这个导航员
将在两者之间导航
标签页文件夹的不同屏幕，我
想要那个带按钮的用户界面组件
无论如何都要导航显示
我们当前处于哪个屏幕中？这样就确定了。
概念与“什么”的概念有关
布局确实如此。所以在这个布局文件中……
在这里，我们可以放置已存在的用户界面。
呃，两个屏幕定义之间
无论如何，它都会出现。现在
我们实现这一目标的最基本方式
那个标签导航的外观实际上是我们
我不想把它称作栈。
因为这不是一个堆栈。这就是
一个堆栈就是。这是个乐谱，对吧？
所以我们希望将其从“代替”切换过来。
说到堆栈，我们实际上想说的是
从 Expo Router 导入选项卡
组件，我们想要渲染它
反而。现在我们将它替换为
tabs.screen 也一样。你会发现……
当我保存文件时，会自动
我们要获取底部标签页
领航员的造型。所以这里有两个。
不同的路线，我们实际上可以
只需在它们之间导航即可
点击每个单独的标签页。所以现在我们
不需要这个登录页面。它
看起来有点丑。我们实际上可以
从这里移除这个。伟大的。
现在我们有了导航的方法。
但这有点奇怪。我们没有
例如，我们有相同的图标
对他们每个人来说。那么我们该如何切换呢？
并可以自定义每个标签页吗？所以
你实现这一目标的方法就在你的……
您可以实际放置的标签布局
一些标签选项
创造。所以，你能做的第一件事
实际上，你可以将颜色设置为
当前激活的标签页是什么？例如，我们
都在这里的首页标签页里。我可能
想让这个标签页有不同的内容
颜色。所以为了做到这一点，我可以来到
这里的标签组件。我可以设置一个
屏幕选项对象，我可以设置一个
标签栏
激活色调颜色，我可以将其设置为
例如珊瑚色
我之前用过那个按钮，现在它
更改了哪个 u 标签的颜色
积极的。我也可以将其改为
改为标签栏活动背景
颜色，然后它就变成了某种东西。
稍微有点……疯狂。我这就去
保持原样，因为它看起来……
还行吧。现在，有一件事我们
也想这样做，也许实际上是
更改图标。所以，当你设置的时候
您的项目，它自带这个流行的功能。
名为矢量图标库的库
来自世博会。所以这将给你
很多图标，而且在每个应用程序中都有。
创建时您需要一个图标库
仅仅因为它们很常见
移动应用。所以，导入图标的方式
取决于你要使用哪些图标。
进口。所以我们将全面开放
以下是 ver vector 中的图标列表
图标，我会把链接放在这里。
以及这个代码
视频。但你可以看到，这里有一个
列表中充满了图标，而且还有
不同的图标提供商
如你所见，如果我最终设计成这样的话
只需搜索我们可以获取的首页图标即可
来自 antipo 羽毛字体的超棒字体
有很多，所以，呃，你选吧。
随便你想要哪个，比如我们……
这个是从我家拿的，你可以看到
我们这样做的方法是，呃，你复制
使用这条命令导入它
把它粘贴到顶部，然后你就可以
复制该组件的渲染结果
直接复制粘贴就行了。
就在这里。所以如果我回到我们的
应用程序，你看，实际上它不会
出现吧，因为它就在这里。但是你
必须相信它有效。现在
我们想做的就是放置
这个图标用来替换主页图标
这边。现在，我们要采取的方式是
这样做就是我实际上要来。
主页标签页，我想给
它是一个名为“标签栏图标”的属性
我把它设为等于
一个函数，它将具有一个
返回此组件调用。和
你可以看到，现在它渲染了房屋。
用图标代替那个呃，随便什么吧
图标之前存在过。现在的问题是……
这个 com 这个 这个主页图标已渲染
无论如何都是饱的。它不是
即使遵循配色方案
我们把它放在了最顶端。那么，如何
我们是否要适应这种情况？嗯，有了这个标签页
条形图标功能，它实际上给了我们
我们可以用以下一些论点来论证这一点。
嗯，这里是函数参数。所以我是
实际上，我们要对我们可以做的事情进行结构化处理。
摆脱这种困境。而我们能得到的是……
例如，可以获取颜色。那
让它变得简单。我们现在就可以设置了
该图标的颜色将设置为以下颜色：
我们的账单。你会自动看到这一点。
它现在能适应那种颜色了。正确的？现在
你也可以做的一件事是……
图标有多种类型。正确的？所以
你看，我们有这个来自……的首页图标
来自 Font Awesome 5 的脚。但如果我去
我在这里寻找家
嗯，让我看看家，然后我们就……
这很可能是来自 Font Awesome 5。
我们或许可以买这个，因为它……
有点空旷。我只是觉得这就像……
仅作概要而非完整描述。我们
可以复制该图标。我们会把它导入过去。
这里在最上面，因为这是结尾。
设计。我们将复制组件名称。
而我们能做的，实际上就是我们能够做到
当标签页获得焦点时，渲染一个图标。
并渲染出一个完全不同的结果
当标签页未获得焦点时。以及
我们实现这一目标的方式是通过专注
这里是论证的属性。
所以我们所做的就是问：好的
如果呃标签是
专注，所以如果专注是真的，那么我们
想渲染这个图标，但如果不行的话
然后我们要渲染这个。现在
这是个重大事件，因为实际上
直接返回
成分。所以我们必须做的就是……
必须去掉括号。
我们正在放置，我们必须归还这个
结果。所以我打算把所有东西都退掉。
返回结果。所以我回来了
如果 focus 为真，则返回此图标。
如果 focus 为 false，则返回此值。和
现在，它的作用是让你看到何时
当我们专注于家的时候，我们看到
Font Awesome 5 图标。但是当我
点击这里，它现在切换到……
其他图标。现在我不认为这
具体来说，有两个图标很适合这个用途。
举例来说，就因为它们实际上是来自
不同的库，但有些库
确实提供，嗯，就像一个装满的
每个版本及其大纲版本
图标。所以你其实可以做点什么。
像这样。所以这就是基础知识
展会路线规划及基础知识
React Native 整体而言。所以我们会
其余部分通过构建来学习。
本课程的项目。它将
成为一款习惯追踪应用，它正在发展壮大。
成为一款全栈应用。我们将要
学习如何组织我们的项目
以使其高效的方式
如果我们愿意，我们可以扩大规模。
你们将能够使用
你们对 React 的了解程度如何？
具备 React 的基础知识
实际上，剩下的部分就交给我来建造了。我觉得如果
你对 React 有一点了解，这
对你来说会非常容易。但
即使你不懂 React，我也会
带你们走完每一步
这样你们才能真正摆脱困境。
视频讲解完全正确。所以，
让我们开始构建……
项目。所以，正如你所看到的……
视频开头，这个项目
我们将要建造的东西正在
它将成为一个习惯追踪器，而且它将会……
做一个全栈项目。所以，我们要走了
必须学会如何应对这种情况。
但是，我们将继续……
我们在同一个项目中中断的地方，
在与我们编写代码相同的文件夹中。
我们想做出一些改变。所以
我首先想做的就是我想要
为了设置我们的项目，以便用户
可以进入应用程序并能够
创建账户或登录
他们已有的账户。所以要这样做
我们必须做出决定
将项目扩展为全栈项目。和
嗯，有很多不同的方法……
可以做到。呃，显然你可以制作
你可以使用自己的后端，或者你可以使用一个
后端即服务提供商。呃
外面有很多这样的。这
最受欢迎的例子是 Firebase，
AppRight，或 Superbase。所以，在这个
视频方面，我们将使用 AppRight。
所以，这是一项免费服务，但我并不在意。
由赞助商提供，但您可以直接进行。
然后点击描述中的链接或
直接访问 apprite.com 即可。你将会
此页面提示。实际上
apprite.io。现在，你必须创建一个
帐户。呃，我通常只是创建我的
拥有GitHub帐户。然后，你需要
点击进入控制台。当你
点击“前往控制台”，你就会……
针对您的项目提出建议。我创建
这里有个新账号，呃，就是为了这个。
视频。呃，所以如果你想创建一个新的
项目，点击创建新项目
这里有个项目，它会要求你
你的项目名称。所以我们将要
开发一款习惯追踪应用。就是这样。
我打算这样称呼它。现在我是
准备点击下一步。而且它将
请将我们地区纳入部署范围。现在，
目前，AppRight 只覆盖法兰克福地区。
然而，它们都在计划之中
实际上也包括其他地区，
而且这不应该造成太大的影响
这是我们项目中的一个问题。所以，我们是
点击此处创建，然后你
可以看到我们的项目已经创建完成。
现在，使用 AppRight 的全部意义就在于此。
我们可以促进创建
我们项目的后端。类似地
比如 Firebase 和 Superbase 之类的工具
AppRight 实际上允许您进行设置
数据库交互和身份验证
融入你的项目，甚至是实时
信息传递。所以就我们而言，呃，我们是
将使用 O 来处理签名
在创建账户时，以及
他们的数据库。现在数据库
AppRight 实际上是一个关系型数据库。
数据库。所以，嗯，如果你不知道的话……
apprite 在其呃……上使用 MariaDB
然而，数据库下划线部分很多
人们认为它实际上是一个 NoSQL 数据库。
由于术语的原因，数据库
我们在创建时使用
Apprite上的数据库与之非常相似。
就像在 Firebase 上用 Fire 一样
商店里有像收藏品这样的词
以及非常常见的文档
用于 NoSQL 数据库，但实际上
当你使用 Apprite 时，你是
使用关系型数据库。我
只是想先把这件事说清楚。
如果你曾经有过这种疑问的话。现在，
我们开始吧。我们不是
我们还没开始创建数据库呢。是
我们将从 O 开始。O 是
默认已设置。然而，我们
需要连接我们的 AppRite 项目
添加到我们的 React Native 应用中。所以呢
我想做的就是回到我们
我的应用，我想创建一个文件夹，该文件夹
它将位于我们的应用程序文件夹之外
它将被命名为唇部。现在
在这里我们将创建
appite.ts 文件将是
用于连接的配置文件
适合我们的项目。所以我们需要什么？
我们需要做的就是安装 React。
原生应用SDK。所以我要来了
这边过来，我们要清场。
我们的终端，我要运行
npx expo 安装。所以当你安装时
你运行 npx expo install 的软件包
然后输入包裹名称。
在我们的例子中，它将是 React。
本国的
有料。现在我们还要安装
另一个能提供帮助的库
建立这种联系。将会
成为 React Native URL
填充聚合物，然后按回车键。这
应该将这两个软件包安装到我们的系统中。
项目。而在我们这边的顶部
应用程序文件，我要导入呃……
账户，
客户，以及
来自数据库
React
原生应用。
嗯，接下来我们要创建
我们的 Apprite 客户。所以我要说
conclient 等于 new client。现在我们
得把一些东西放进去。
客户才能真正做到这一点
加入我们的项目。第一件事
我们需要做的就是设置一个
终点。现在，终点将是……
我们从 appite 获取的端点。所以
如果我走到这边，就可以进入设置了。
我可以看到我的 API 端点是
概览部分在这里。我们得到
API凭证，我们可以复制这个
价值。然后我们可以直接把它放在上面
这里，呃，它实际上会设置那个。
终点。现在我要说的第二件事是
我需要做的就是将项目设置为
请指定我正在创建的项目。
我的账户。现在这个项目即将
就是这个ID。所以我打算
复制这个，我再回去看一下。
在这里，我将把项目设置为相等。
正是如此。最后一件事是我需要
为我的项目搭建平台。现在
我的项目还没真正搭建起来。
然而。为此，我要来这里
概述，我们需要添加一个平台
这样，我们就可以指定我们在哪里
我们正在构建我们的应用程序，这是一个正确的项目。所以
有Web，有Flutter，还有
苹果特有的，而且显然是有区别的。
React Native。所以，我要复制
点击这里了解 React Native，然后……
它会要求我们输入包裹名称。
登记。我们只是打算给
这是该应用程序的名称。所以，我要……
可以称它为习惯追踪应用。呃，那
它会要求输入软件包名称。
你想怎么叫它都行。我是
我打算把它叫做 co.pro
标签.习惯追踪器或类似的东西
这。你可以看到你可以设置
对 iOS 和 Android 系统都适用。患病的
保持两者相同即可。和
然后我要点击“下一步”。现在
当我点击“下一步”时，它会……
实际上，我们发出了这些命令。
已安装。所以我要点击
下一个。以及我们所拥有的一切
已经写完了，实际上已经结束了
这里。所以我直接复制这段话。
然后我会回到我们的代码，然后我会
直接粘贴过来，这样我们就能得到……
平台也是如此。现在我要点击
进入仪表盘后，我们应该会……
项目已成功连接。现在
这些信息是您的凭证。
它们应该妥善保管。呃，所以没有
存储凭证并将其放置
在 GitHub 上公开。所以我们需要做什么
我们需要做的就是在我们的设备上创建一个AV文件。
项目，以便我们能够访问这些
其他渠道的凭证。所以我现在的情况如何
为此，我打算过来一趟。
在这里，我将创建一个
env.lo 文件，我想对这个文件进行以下操作：
嗯，创建将要使用的变量
请在这里表示这些数值。
所以我要过来这里，到我们这里来。
外送。首先，我们来创建一个……
端点的环境变量。
所以我要在这里创建一个公共博览会。
你必须这样做，因为每
Expo 中必须设置的环境变量
以“expo public”为前缀，然后
你需要写出变量名。所以
就我们而言，它将是合适的
端点，我们将设置这个
等于此值
这里。完美的。现在我真的要……
先把这个复制下来，这样我们就不用再复制了。
继续回来。我这就去
把它粘贴到这里。然后我们来复制
平台也是如此。直接粘贴就行了。
这边。现在，对于终点或对于
项目 ID，我直接粘贴就行了。
就是这样。我要把这个叫做
项目 ID。然后是最后一个问题，
它将成为平台。所以我会
直接拨打这个平台电话就行了。完美的。现在到
把它从这里进口过来，我们实际上就是这么做的。
使用
process.env 点，然后是名称
多变的。所以就我们这里的情况而言，我们
具有终点变量。然后我们想要
使用 U 项目 ID 变量。所以
我把它复制下来，粘贴到这里。我会
同时将此内容复制到平台上。和
我直接写平台就行了。所以我会删除
我会把这个写成平台。现在是
它报错的原因是
因为我们使用的是 TypeScript，而且……
严格来说，实际上你可以
可能对此没有价值
环境变量。所以，理论上来说，
这
process.env 变量的任何名称
您输入的内容可能为空。既然我们知道
我们确实把这些值放在了 uninv 上
文件，我们断言存在一个
该变量的值。所以它会移除。
那条小小的波浪线。完美的。和
现在我们已经成功创建了我们的
客户。现在我也想导出这个
客户端，以防我以后想访问它
在我们的项目中。但有一件事你
需要了解的是，不同之处
apprite 上提供的服务
例如身份验证和数据库
彼此独立。所以你
实际上可以直接使用应用程序 O
你想用它还是只是用它来……
无需使用另一个数据库。
所以我们需要具体说明我需要哪项服务。
想在我的项目中进行初始化
有料。所以，我想要的那个对
现在是O服务，而我的方式是
我要做的就是创建
一个名为 account 的变量，我要去
将其设置为等于新帐户
这是我们之前从……导入的内容
React Native apprite。然后在这个班级里
这边，我得先把我的客户交给他。
我会导出这个变量。而且
我可以访问并修改这个变量。
对用户身份验证的修改
服务于 apprite。那么，让我们开始使用吧。
它。我打算把所有东西都关掉。
好了，现在让我们开始我们的项目吧。
所以我首先想知道的是，如果我
打开应用后，我希望能够……
会弹出 O 页面，对吗？一个
页面会告诉我们……
您可以登录我们的账户或注册。
创建一个账户。我不想看到
我们现在看到的页面。所以要这样做
我想在我的页面上创建一个新页面。
应用程序，它不会成为……的一部分
标签页，因为它不会是
可通过标签页访问的内容。它是
将会独立于那件事之外。所以
我将在这里创建另一个名为
O.tsx。这将代表 O
屏幕供我们登录和
报名。所以我会在这里导出……
默认函数被关闭
屏幕。现在，在屏幕外，我
想要从中返回一个特殊组件
React Native 被称为
键盘遮挡视线。所以这是
基本上就是我们一直以来使用的那种普通视图。
已经。然而，它确保了
键盘不会遮挡我们输入的任何内容。
这里里面将会是
形式。只是为了避免惹人厌烦
当你在其中一个键盘上打字时
输入。键盘出现在顶部
它。所以，这种行为将会改变。
取决于你使用的平台。呃
但我认为如果这样看起来会更好看。
你这样设置。所以，你的确有
这里要具体说明一下这种行为
你想摆脱它。所以，我就设置一下
行为。根据平台的不同，
您可以使用某些关键词。
用于帮助其适应您的屏幕。所以
例如，我可以得到任何东西
我的 React Native 应用所在的平台
通过使用
来自 React Native 的平台对象
只是在安装操作系统。这应该会返回
iOS、Android、Mac OS、Windows
或网络。以上就是所有选项，对吗？
因为那些是你可以建造的。
使用 React Native。现在如果平台
如果操作系统和 iOS 一样，那么我想……
设置内边距，内边距基本上会
在此视图顶部添加内边距，以便
该内容不在以下范围内：
键盘，而且这是 iOS 专用的。
如果不是这样，如果基本上是这样的话
我们希望在 Android 系统中将其设置为
高度以及它将要做的事情是它会
只需调整视图高度即可
基本上就是做同样的事情，腾出空间
用于键盘。所以这就是我们
必须在键盘上操作，避免视线干扰。
接下来我们想要的只是一个
正常视图。所以我会在这里放一个
视图，并且我想在这个视图上放置一个
文本。现在这段文字将是 O 文字。
例如，默认情况下它可以这样做。
创造
帐户。现在我需要导入这段文本
这边。我将从 React Native 导入。
也一样。
嗯，我想看到它出现在……
屏幕。现在，我们显然只是
看到首页或登录页面。
那不是我们想要的。所以，方式
我们要做的是，我们实际上
我们将来这里看看我们的布局，我们的
默认布局。我想开始
构建此布局使其能够
在我们的应用程序中进行扩展。现在，
它只是在定义堆栈，对吧？这
带有标签的堆栈。然而，
我能做的就是创造
这就是所谓的路线防守。这是
基本上会是一个组件，
将会围绕我们的布局进行调整
这将决定是否或
不是用户是否登录。如果
用户登录后，将显示以下内容：
关闭后，选项卡将直接显示在屏幕上。
标签导航和实际屏幕。
但如果用户不是，则会显示
0 页。所以为了做到这一点，我打算……
在此处创建路由守卫。并且要制作
我必须拥有这个包装组件。
把孩子当作道具，因为那样我
将此类型设置为
类型为 react 节点的子节点。 React 节点，
对不起。然后，在这里，我们想要什么？
我们要做的是基本上运行
检查用户是否已关闭或关闭的逻辑
不，我们现在还没有那个。
然而。所以我接下来要做的就是……
只需创建一个“is off”变量即可。我会安排
它等于 false。而我们所做的就是我们
想确认一下，好的，我们会运行一个使用
效果会在此时立即运行
组件渲染。如果它关闭了，那就不是
如果真是这样，那我们就直接替换用户的
当前路线与偏离路线。所以
我们在这里有点强迫自己这么做。
是时候真正展示一下幕后画面了
实际上，需要替换这条路线。
我们可以使用这个重要的钩子，它叫做
使用路由器钩子。我们可以进口它
来自 Expo 路由器。嗯，它会给我们带来
访问此路由器对象。所以我们说
const router 等价于使用 router 和
我们会在需要重定向时使用此方法。
到应用程序的不同部分和
很快。就我们这里而言，我们
基本上只是想替换掉
用户当前状态为 um O
路线。所以我们就说赶紧出发吧。你会
现在如果我回到这里，就会发现，这在
这种情况是因为它只是一个包装器。
组件，我只想返回该组件。
是孩子，对吧？我不想回去
任何用户界面。这实际上只是为了
检查是否为 O 状态。而在这里我
用这条路线把整个事情包起来
警卫。所以让我们用这个来包装这个栈。
路线守卫。你现在就会看到这一点
自动将我们重定向到关闭
页。所以这里显示的是创建过程。
账户，也就是我们这里所拥有的账户。
我们的页面外。我们就保持现状吧。
一秒钟。我们将构建此页面
第一的。嗯，然后我们就继续。
实际上，还要制作那些东西。
工作。但现在，我们先这样做吧。什么
我们希望在这个页面上看到：我们希望那里有
嗯，这是一个文本输入框，它将会是
电子邮件中有一个文本输入框。
将会用于密码，然后是
登录或注册按钮。现在，
因为用户需要登录。
并注册同类型的
我们会保留这些信息。
简单来说，用户只需……
需要提供电子邮件地址和密码才能登录
注册时需要提供电子邮件地址和密码才能登录。
我们将重复使用这些输入。
两种情况。所以，在文本下方……
在这里，我想创建一个输入。
电子邮件。而做到这一点的方法是……
来自 React 的文本输入组件
本国的。如果你曾经和任何东西一起工作过
就像过去的 HTML 或 JSX 一样，你
要知道这与……非常相似
输入您可以使用的 um 标签。现在是
对于文本输入框，我们将传递一个
标签。所以标签将会是……
电子邮件。然后我们基本上想要设置
电子邮件地址不能大写。
我们可以使用自动大写来实现这一点。
等于没有，因为如果你曾经
适用于手机上的任何内容
之前你可能已经注意到这一点了
当你开始输入时，自动大写
第一个字母。所以你不想
照做。你想保持现状
这是因为电子邮件通常不是以……开头的。
首字母大写。接下来是下一个
问题是我想保留键盘
呃，类型。所以这很重要。
你想输入的内容
你的手机会根据什么而改变？
你正试图用它做什么。呃，这个
prop 将决定键盘类型
将显示的布局
用户。所以如果是电子邮件，那很可能
应该显示@符号
挺大的，对吧？这样用户就可以
真正地使用它。或许可以给一些
类似 Gmail 和 um 的推荐
我不了解展望等等。所以
我们实现这一点的方法是将类型设置为
电子邮件。那么我们现在可以通关了。
一个占位符，内容如下
类似
example@gmail.com。你应该看看
现在输入内容出现在这里了，
我可以开始在上面打字了。现在显然
造型方面，我们暂时还没开始做。
我们完成后会这样做
该组件。呃，但我想要一样东西
值得一提的是，某些造型
我们将要拥有的将是
几乎是自动的。原因
那是因为我们将会
使用 React Native Paper，这是一个
非常棒的 React 设计库
本国的。它到处都在用，而且我
强烈推荐，可以用来打造你的风格
非常容易。所以，我们要来了
这边。我们将举办 npx 博览会
安装。呃，我刚才按了向上键，然后我会
改一下这个就行了。我们将要安装
React Native 论文。而现在，当那……
安装已完成，而不是在启动时安装。
实际上导入了一些用户界面元素。
来自 React Native 的输入，我们实际上是
将从 React Native 导入它们
纸。更具体地说，我想
从 React Native Paper 导入。还有什么
我想导入的是文本组件
以及文本输入组件。所以我会
实际上，把这两个都删掉。和
我们要把它保存下来。你会看到
现在输入已经自动
改变了它的外观，现在看起来……
好一些了吧？是
当然，我还是会继续做造型的，但是
看起来好多了。
此外，还有一件很酷的事情是……
新的文本输入方式，来自
React Native Paper，这是模式吗？
道具，其主要用途是
定义输入框的视觉样式
场地。所以，比如如果我们把它设置为
已经概述清楚了，这正是我们想要的。
嗯，概述一下，你会看到
输入会自动变成这样
输入框看起来真酷。现在，
我们差不多已经完成了一些工作了。
初始道具。我们要复制
这。我们要再粘贴一次，然后
我们将为……制作一个
密码，其他信息我们都会保留。
相同的。呃，但我们不去。
插入占位符。嗯，或许我们可以
就像你说的
密码之类的东西。呃或
实际上我们不需要占位符
要诚实。每个密码都是非常
不言自明。你可以看到
用户界面已经有了这个很酷的动画效果。
React 的这一点也很棒。
原版纸。现在是最后一个用户界面方面的问题，我们
我们想添加一个按钮
下面这里。所以我们要加上这个
该按钮也来自 React Native。
纸质表格，我们只需说报名即可。和
按钮看起来会像这样。但是我们
实际上可以给它赋予一种类似的模式。
看看我们如何处理文本输入。我
想把
包含模式。然后它就会……
实际上充满了紫色。
现在我们不希望这仅仅是……
注册页面。我们希望它也是
登录页面。我们想改变它
通过这里下方的按钮
底部。所以我们要复制这个
按钮，我们实际上要……
这里再渲染一个。它不是
将会是封闭模式。是
实际上，我会把它设为文本模式。和
这将使它成为一件普通的事。
文本。而我想做的是，我想……
基本上就是问，你是否已经有一个
帐户？如果你愿意，请点击这里
签署
进去。我们想点击这里，
然后切换屏幕，使其实际显示为
登录页面。现在，为了做到这一点，我需要
跟踪用户是否正在尝试
登录或注册。所以我打算
在这里创建一个状态，它将是
叫做注册，我们将要
创建一个名为 set 的函数，其符号为 sign。
向上，我们将把它设为等于
使用状态。而这样做会起到这样的作用：
将会跟踪是否
用户是否想要登录。这
将会是一个布尔值。所以，我要走了
将其设置为布尔值，我们开始
确实，一开始是这样，因为
我们不妨假设一下……
一开始就说是假的，因为我就是我
仔细考虑一下。对我们来说，这样做更好
呃，这样做是为了方便即将到来的用户。
后退。正确的？所以，这就能让我们
知道用户是否正在尝试注册或
不是。现在，一切都改变了。
因为如果用户没有尝试
注册，意味着他们正在尝试签名
意思是，从一开始
这里我们需要修改这段文字。
而不是说“如果是，则创建帐户”。
注册后我们会做的，我们会的。
显示创建帐户，但如果用户
如果对方尝试登录，我们会说些什么。
欢迎回来，这就是全部内容。
如果这是真的，它会说：
如果此值为假，则会创建帐户。
现在说“欢迎回来”，逻辑相同。
用这里下面的按钮代替
如果要注册，我们会说“注册”。
注册是真的，但请注册
如果为假。最后，就在这里。
我们也要做同样的事情，但是
它会稍微大一些。
我们会说明注册是否属实
然后我们会显示这段文字。但如果是这样的话
如果答案是假的，那么我们将展示不要
拥有一个账户。问号注册。
这就是现在显示的内容。现在，如何
我们会在不同的之间切换吗？
模式？嗯，我打算在这里创作。
一个名为“处理切换模式”的函数。
我刚刚意识到我用的是箭头
这里使用符号表示法，但您可以使用其他任何一种。
符号。我们一直使用常规方法
函数符号，但这是一样的。
事物。现在，关于这个切换模式功能
我在这里所做的只是设置
该符号等于相反数
它目前的价值是多少？我明白了。
通过访问参数获取当前值
该函数及其值设为等于
恰恰相反，因为如果这是真的，
它将变成假的。如果这是假的，
它终将成为现实。现在，我想打电话
当按钮按下时，此功能会启动。
底部被称为。所以，你可能会
预计我会在这里添加一个点击事件，但是
这不是网站。所以，没有……
点击按钮。相反，它被称为
正在印刷中。但还有一大堆
您可能想要保留的其他活动
记住，如果你以后想做一件事的话
略有不同。现在，关于这一点……
按下按钮，我将调用手柄切换模式。
如果我点击，你就会看到这一点。
它会在登录和
报名。它会不断切换
无限期。完美的。现在，我认为我们
实际上可以对这个进行样式设计。
看起来好多了，比如居中
各种东西，以及整体上让它看起来……
更好的。所以，我想做的就是我想
做我们一开始做的事情
这门课程旨在创造一种风格
本页的表格。所以，在这里
底部，我将创建样式。
我将把它设置为等于样式。
表格点创建。
然后我需要实际导入这个文件。
我导入了吗？不，我没有。所以我会
从 um React Native 导入
样式表。我会说创造，我会
传递一个对象。现在，我首先要说的是……
想要传递的是一个我们正在使用的容器
本页将包含以下内容。它要走了
涵盖整个 p 整体
屏幕。所以，这种造型是这样的。
容器将是弹性的，等于
一和背景
颜色等于，我想把这个放进去。
这边是颜色。这会很仁慈。
就像与我们风格相匹配一样
按钮和
输入。它将是一个十六进制的F5
F5 F5。现在为了应用这个方法，我们将……
来这里欣赏我们的风景吧。而在这个顶部
这边一个，我要设置一下
风格等于
样式.容器。我要存钱
这。你可能还没有意识到这一点。
注意到区别了，但我们还是应用一下吧。
这里也有这种视角的风格。
我打算把这个叫做
内容。而这边的款式是……
让我们把这个值翻倍，并创建一个样式。
内容。现在，对于这个，我们是……
保持弹性等于 1
出色地。但我们会加些衬垫。
所以我要加一层衬垫
16. 当我保存这个的时候，你会看到
一切立刻变得有点……
嗯，确实如此，它实际上并没有被拉伸。
出去。然后，我还想证明……的合理性。
内容为中心，这样我们才能拥有
屏幕中央的所有内容。
显然，这里存在填充问题。
仍然。所以我们要解决这个问题。我
首先想处理这个标题。
这里。所以，我要创建
标题对象。呃，所以我们会来这里
文本，我只想说风格。
等于
样式.标题。现在看起来很奇怪，因为我
直接复制了内容中的样式。
但就标题而言，我想做的是
我想让文本与……对齐
中心。所以，它位于这个中心。
输入。然后我想设置一个边距。
24 的底部，所以看起来不太像
离输入端太近了。接下来是下一个
样式将作为输入参数。我会做这件事
同时按下按钮和输入按钮
我们不会一直向上滑动屏幕，
向下。我这边负责输入。
按钮。现在，关于输入，我们
我们只想拥有一个
边距底部距离底部
彼此。所以，它离得并不太近。
按钮，而且不要离每个按钮太近。
其他的也一样。所以，我会把……
底部边距，但我会稍微调整一下。
略小一些。我打算把它改成16。
你很快就会看到结果了。现在，为了
底部，也就是按钮的位置，我其实
想要留出一些余地
顶部。而利润率上限将会是
八。那应该不错。是
接下来我会在这里输入信息。是
我要复制这个。
我们将把它们应用于两者。
输入。我也会把这个复制一份。
把它放在这里。你看，就是这样。
变化。它只是创造了更多空间。和
那么对于按钮，我们将……
请在此申请
风格。完美的。现在，我不会……
因为它也被应用到另一个按钮上。
这一个实际上会有所不同。
造型。它将被命名为
切换模式按钮。
嗯，所以我们会把它创建下来。
这里。通过切换模式按钮，
我只想设置
最高边际为 16。所以实际上还有
更多空间，双倍空间。完美的。
我其实想申请，我看起来……
刚刚注意到这看起来有点
清楚的。所以让我们给它加上一个变体
使用此文本组件从应用程序发送文本
摘自 React Native 论文。我们可以传递一个
这里有个变体。我们想要的变体
申请是
标题变体，呃，让它稍微
稍微大一点。但我也会把它设定好。
中等。我写错了。我
不应该把A放在这里。而且它
应该看起来更大一些。
完美的。现在我们准备真正开始
实现允许背后的逻辑
用户需进行身份验证。所以我们现在的方式是
我们要做的就是……
在这里创建一个函数，该函数将……
被称为句柄
o.这个函数将处理两者
创建并登录账户。
我们将在任何时候称之为
用户按下登录按钮。所以我们会
点击这个按钮，我们接下来要做什么
正在印刷，我们将通过
把手关掉。现在，关于这个函数，我们需要
为了使其同步，因为这即将发生
调用我们的 apprite API
实际登录或注册用户。
为了做到这一点，我们需要跟踪……
用户在输入框中输入的内容。
所以我需要创建一个状态，该状态是
我会记录下这个值。
邮箱地址和一个密码地址。所以
我在这里要创建一个电子邮件。
状态已设置电子邮件功能，并且是
将等同于使用状态字符串
它将是一个空字符串。
首先，但我还要创建一个
密码在这里，还有一套
密码。完美的。现在我想做什么
当用户正在输入此内容时
我想更改以下输入的值：
那些州。所以我们用这种方式来做这件事
文本输入框是我们传递更改信息时传入的。
文本，我们调用设置电子邮件函数。
所以我们只需要设置电子邮件即可。我们没有
甚至无需进行任何处理，因为它
它会自动为我们完成，因为
这是 onchange 事件处理程序的文本。它知道
请在此处设置值。现在我们可以
对……做完全相同的事情
密码。所以我要说的是“设置”。
密码会一直保存着。
也一样。所以，我需要做的第一件事就是检查
对此函数的要求是：我们是否有
任何电子邮件或密码，因为如果我们
如果没有那种设备，那我们就没有
想真正允许用户尝试
登录或注册。于是我们就过来了。
这里我们会说，如果不是电子邮件，或者不是
如果密码有问题，那就说明有问题。现在是
我们将用这种方式跟踪问题。
是通过一个即将成为的状态
称为错误状态。所以我们要……
假设 const error 等于 set error。
我把错误写错了。呃，是
将会是一个使用状态，这将是一个
可能是字符串或空值。如果没有
错误，结果将为空。现在在这个
这里的功能，我要设置……
错误等于……嗯，大概是……
请填写所有字段。如果
出现错误，我想显示出来。
在屏幕上显示给用户。那么，我们走吧
这里下方，按钮之间是……
提交按钮和
输入方面，我们实际上要检查一下。
看看有没有错误。如果存在
这是一个错误，我想
像我使用文本一样显示文本，我会
请在此处显示错误信息。所以万一我
现在就试着登录一下，你就会
它会显示的。请填写所有信息
字段，因为这是我们遇到的错误
就在这里。此外，我们还想返回
因为我们要加入一些逻辑。
我们不想待在这里
如果情况属实，则执行。另外，我们……
让这个错误看起来稍微……
更好的。我们可以通过以下方式实现这一点：
设置一些我们可以实现的样式
实际上，这些颜色就是通过这些颜色来体现的。
我们可以从 React Native 论文中获取相关信息。所以
我的意思是，如果我过来
在这里，我说风格，然后我应用一种颜色
没错，我可以说红色，这样就能……
它是红色的。但我认为这种红色并不
看起来真好看。我可以做的是
我可以在 React 中使用这个函数，或者
这个来自 React Native Paper 的钩子叫做
使用主题。这个钩子的作用是
使我们能够访问他们的主题，包括
它们的颜色。所以我认为主题是平等的。
使用主题，它们都有主题颜色
比如任何东西，包括颜色
对于存在以下情况
错误。所以我可以说主题颜色和
然后我就可以访问例如错误信息了。
这正是我想要的颜色。
试试看。你会看到它看起来像……
与其余部分更加一致
React Native 论文主题。现在我们开始吧
做一些简单的验证，因为大多数情况下
我们实际上可以对以下内容进行验证：
后端。就我们这里的情况而言，我们只是
想确认的是
密码长度小于 6，因为如果
如果存在的话，我想设置一下。
错误在于
密码长度必须至少为六位。
人物
长的。然后你就会明白，如果我
也请回到这里，嗯，如果有的话。
即使没有注册任何内容，它仍然会提供
我们犯了这个错误。但如果我在这里放一个
电子邮件，
嗯，然后我放了一个很小的
密码。这是错误信息。
我明白，因为我们不想要人。
要设置非常短的密码，因为
不安全。完美的。现在我们要来了
这边，我们要设置……
错误值等于 null 以防万一
错误信息被设置成了其他东西，对吧？
就像这里的情况一样，我们想要
将其设置为空，以便我们重新启动。
实际上，我们负责进行身份验证。现在，
为了做到这一点，我们实际上是
我们将把逻辑分开
用于登录的身份验证和
注册，并跟踪
无论用户是否注册
通过一个钩子，我们将要
创建，这将利用
来自 React 的上下文 API。所以，
我们打算这样做：
我打算创建它，呃，我就创建它。
这里在我们的图书馆。呃，其实并没有。
事情。我打算把它创造出来。我是
即将创建 o context.ts。
tsx 文件。现在我想在这个文件上……
做两样东西。我最想要的
我们要做的就是成为供应商。
用于分发信息
关于我们项目的身份验证问题。所以
我要说的是导出函数 o
我将创建这个提供商。
这是一个包装组件。所以我们必须
做和我们之前做的事情非常相似的事情。
通过路由守卫，我们可以获得
儿童及其类型将是
患有
反应
节点。我显然忘记关机了。
以前是这样，但现在可以了。嗯，然后我们会
这里不会归还任何东西。
暂时返回。但第二件事我
我想要从这个文件中导出的内容
到
导出一个名为 use 的函数或钩子
脱钩后，它将使用
在此基础上创建的背景
供应商并实际返回给我们
我们需要去的任何地方。所以，我们
不必不断导入
我们将要创建的 O 上下文
嗯，在我们做的每一个文件中。嗯，
所以这对我们来说是一个巧妙的方法
实际上，要用简单的方法实现这一点。
所以我们想做的是在这个 O 上
供应商，我们想创建一个……
语境。所以我真的会做到。
在它之外，所以我们可以访问它
这里也是如此。我们将创建
上下文。现在，在这个 O 上下文中，我们……
将使用从创建上下文
React，我们希望将其设置为 undefined
最初，但我们希望定义类型
由于我们正在使用 O 上下文，因此我们使用
TypeScript。所以我会定义O型
上下文类型，或者我就直接说“是的，上下文”吧
类型。现在，我们想知道什么
我们想要跟踪的信息
在这种情况下？首先，我们
想传播有关以下方面的信息
是已登录的用户，对吧？因为
在我们的应用程序中，我们希望在所有地方都……
记录下这些信息。所以，
我们将传入这个用户
信息。现在，我们没有这种类型
对于用户来说，但我们可以使用的是 um
在 Apprite 中，你实际上可以导入
用户类型来自 apprite。所以你可以
从 React Native 应用导入模型，
正确的？用户类型是
将成为模特
用户，我们也在这里传递。
模型偏好以及可能的
如果用户不是用户，则用户也可以为空。
已验证。这是用户类型。
第二件我想保留的东西
跟踪只是这些功能
我们将使用。现在，我们是
将会改变这个 O 上下文呃
随着我们不断添加内容，但就目前而言，我们
只是想跟踪用户信息。
如果他们喜欢某个功能，可以让他们签名
向上，它具有一种功能，
返回一个
承诺，不过是一个空头支票。而且我也是
准备创建一个登录表单。所以，我会
比如登录。现在，这个功能是……
需要我们发送邮件
还有密码，对吧？要注册，我们
需要传递这些信息并
你也需要登录。所以当我们定义的时候
至于它的类型，我将要设定。
电子邮件是我们需要做的事情之一
从中获取密码
出色地。现在我要做同样的事情。
在
登录后，我会把这个上下文传递出去。
将类型作为此创建上下文的类型。
现在它最初也是未定义的。所以
所以，我还要说，它也可以
未定义。现在我们创建了这个 O
背景以及我们想做的是：
想用它来创建这个 O 提供商
返回一个将要包装的提供程序
孩子们，这就是我们包装的东西。
周围是组件。所以我打算回去。
这里 O 上下文点提供者转向
这笔款项转交给供应商。我会做这件事
我这里也是一样。我需要通过一项
它的价值。更具体地说，我需要
传递一个即将……的对象
包括用户、注册和登录。
所以，我在这里创建一个用户，注册，然后
登录。显然，我们还没有做出决定。
那些事情还没有发生，但我们将要……
一秒钟就能做好。现在，最后
我需要的是，我基本上需要
把我们从……那里得到的孩子渲染出来
将 prop 直接放在这个里面，否则
这不会是一个包装组件。
完美的。现在我们可以创建
用户注册所需信息
以及用于登录。现在让我们从……开始
注册就对了。所以我们要……
在这里创建一个名为 sign up 的函数。和
就像我们在这里定义的类型一样
打算把这个论点当作论据来考虑。
邮箱地址和密码。而且它也是
将会是一个异步函数，因为我们
需要关闭这个句柄
我们基本上已经放弃了这个功能。
但我们还会继续做这件事的。我们
得先把这个做好。现在开始
注册功能，我想尝试一下
执行注册操作
app.right，但如果出现任何错误，我们
想抓住他们，我们会处理好一切。
这里发生的事情。现在，在尝试中，我
想尝试一下
等待，这就是我使用的地方
我们在 apprite 上创建的帐户
文件，对吧？在这个账户上
因为有了这个账户，我可以
基本上是这么说的
account.create 将会创建一个帐户
我们项目中的用户。现在要创建一个
我们需要向用户传递三件事。我们
必须提供身份证件、电子邮件地址和……
密码。我们已经收到邮件了。
以及密码。所以我们可以这样做
这。但我们没有身份证件，
实际上，ID 是我们用来表示的东西。
先通过。现在我们可以生成ID了
通过我们拥有的这个 ID 对象
这里来自 apprite，我们可以称之为
独特的功能，这将生成一个
用户的唯一ID
自动地。现在，在此之后，我也有
想要在用户登录后登录
自动创建他们的帐户
让他们签到。所以我接下来要做的是……
我打算说等待
登入。呃，显然我们没有
功能尚未实现，但我们先……
暂时先复制这个。嗯，我们会
把这个标志叫做
进入。但我们将称之为登录。
使用同一电子邮件地址和
密码，这样当你注册时，你
实际上也需要登录。现在，我们
当我们在这里发现任何错误时，我们的做法是：
想要返回该错误消息或
返回一些错误信息。所以，我是
实际上将改变类型
这可能会返回以下任一结果
字符串或
呃，返回空值。这意味着如果
你返回的是一个字符串，发生错误
在此过程中。如果返回 null，
这意味着没有出现错误。所以，在
这个案子，我们要……
返回空值。如果出现问题，
然后我们想检查一下是否
错误类型为。这是一个实例
我们有的通用错误类型
在 JavaScript 中。如果真是这样，那我想要
返回
嗯，错误信息，因为那样我就会……
返回包含实际错误的字符串。
信息。如果不行，我们就直接返回。
一条通用错误消息，内容如下：
错误
发生在注册过程中。
完美的。现在，我们将完全复制这个。
逻辑很简单，我们直接粘贴就行了。
这里是登录页面。我们就是不去
因为那样，需要再次拨打登录电话。
会形成无限循环。呃，
但我们想做的却是，而不是
为您创建帐户以便登录
账户，你实际上会这样做
帐户创建电子邮件密码会话。
这将使用以下方式创建一个会话：
用户的邮箱和密码，对吧？只是
正如其名所示。所以，我们可以就这么
使用电子邮件密码
论证完毕，应该就可以开始了。
也一样。现在，我们把它改成
登录以防出现错误
因为这不是注册。现在，我们是
现在可以登录和签名了
向上。我其实打算评论一下。
目前这个用户只是因为……我们
写逻辑没有意义
虽然我们目前还没有获取用户信息，但我们
甚至还没有实现登录功能。
报名。所以目前我们就先这样吧。
出去，现在我们来测试一下。
实际屏幕画面。现在拥有这个
来自该提供商的信息
在每个屏幕上分发
我们的应用程序需要封装这个 O 提供程序。
围绕我们的布局。所以我们就到这里来
我们的布局，嗯，还有顶部这边的这里
甚至高于我们想要的路线守卫
用 O 包起来
提供者，以便其下方的所有内容
将有权获取这些信息
里面。现在人们的情况如何？
能否获得访问权限？我们情况如何？
准备签到或者
例如，此页面上的注册功能
成分？我们可以利用这一点。
每次都是上下文钩子。然而，
这里使用的函数或钩子是
实际上会让它变得容易得多。
对我们来说，因为我们可以做到这一点，所以我们可以得到
从中获取上下文。所以我要说
使用上下文，我打算直接使用
这里是上下文。所以我们得到
从该提供商处购买所有商品并退款
如果上下文等于 undefined。
所以，如果出于某种原因我们要打电话
这种用法已经失效，我们不在里面。
那么，对于 O 提供商，我们就必须放弃
错误信息提示必须关闭
在 O 提供商内部。我的意思是，那是
不会发生的，因为我们打算……
确保不会发生这种情况。嗯，但那样的话……
然后我们会抛出一个错误。否则我们就……
返回上下文。这意味着
例如，在 O 分量中
在这里我们可以登录和登出。
呃，登录和注册功能
只是调用了 use O 钩子。所以现在我们
获取登录和注册权限。
现在我们可以使用登录和注册功能了。
所以，我们之后，我打算来这里。
将错误值设为 null。如果你
记住，我们已经检查过了，看是否
电子邮件和密码都在那里，或者如果
密码长度大于六。
人物。所以我们可以做的就是我们可以
试着注册一下。实际上，因为我们
处理完此事后，我们将返回
一切都是自动的。所以我不
完全不用担心这个。我只是
实际上会说的是，如果注册的话
如果注册结果为真，那么我将
调用注册功能。如果不是，我想要
调用登录功能。所以，我是
前往
等你注册后，我会把邮件发给你。
以及该函数的密码。并且
这个案子，我将采取完全一样的做法。
登录时也一样。但请记住
这些函数，它们返回呃
这可能是个错误，对吧？所以，我是
将会收到错误信息。如果
有一个
出错了，所以
如果出现错误，我想设置
错误等于该错误，然后
返回。现在关于登录，我想这样做
完全一样的事情，但如果登录
如果成功，我想使用这个用法。
路由器挂钩。所以实际上，我需要
导入使用路由器钩子。而我是
我打算在这里创建一个路由器，就像这样
我们过去也这样做过。就这样，我
实际上可以将用户重定向到一个
不同的页面，例如主页
例子。所以，我可以说路由器
进行点替换，然后将它们带到
首页。
现在我们可以测试一下，但我认为
目前我们测试它的最佳方法是
实际上，请转到应用程序的右侧。
这里是O页以外的地方。而用户们
它们被创造出来之后，就会出现
在我们的屏幕上。所以，我要来了
回到代码部分，我想……
创建一个新账户。我打算使用
我收到一封用于测试的电子邮件
视频。它的名字叫佩德罗泰克·鲁梅斯（Pedrotech Rumés）。呃，
我打算创建一个账户
它。那么，我们输入一个邮箱地址，我来输入。
密码。这将是密码
一二三。我刚刚意识到
这个内容不应该出现，对吧？库兹
这是密码输入框。所以，有一件事
我们可以做的就是在这个键盘上输入
我们这边其实并不想……
请将此内容保存为电子邮件。我们其实只是
从上面复制粘贴。我们
想改一下。但是，我们也想
确保这是一条安全的文本
入口。我们通过实际设置来实现这一点。
安全文本输入，然后它会……
删除这段文字，对吧？所以人们
没看到。现在我要点击
呃，注册一下，如果一切顺利的话……
如果成功，我们就应该拭目以待。
这里的账户是用户
出现。现在你立刻就能看到
屏幕上出现了用户。现在那里
签约方面可能存在问题。
嗯，我可以试试用……登录。
同一个账户。呃，上面说的是创建
会话已禁止。哪一个
会议？哦，是的。我们实际上有
该部分已激活。我忘了。所以，一切
奏效了，但我们只是
强制设置 O um 页面，它是
实际上并没有重定向到
首页。我们仍需实施
那。所以，我们打算这么做。所以，
让我们仔细想想我们到底想要什么。
我们希望在这个 layout.tsx tsx 文件中覆盖
这里是为了实际检查一下是否
用户是否已通过身份验证？
有料。所以为了做到这一点，我们想要
对我们的上下文进行一些更改。
所以我们上去看看。我们想要
因为需要再次添加用户属性。
我们将在某个地方进行这项工作。
在我们的供应商内部，我们将……
使用 appite 检测用户是否
存在。如果用户存在，这意味着
用户已登录，我们将要
将此用户变量设置为等于该变量。
这就是我们判断是否……的一种方法
用户是否已登录。因为如果
如果此用户对象为空，则表示
并非如此。嗯，如果它被设置为
某种东西，这意味着用户是
已验证。现在，我们有一种简单的方法。
为此，我们想要创建一个状态
它会跟踪用户。
所以，我们在这里创建一个常量。
我们称之为用户，我们将创建一个
调用了设置用户函数。我们将设定
这相当于使用状态。现在这种类型的
这个州也将是同一种类型。
我们在这里设立的，对吧？它要走了
成为模型用户，可能为空
也一样。现在，首先显然是因为
没有身份验证，呃，用户
将为空。接下来我们想要什么
我们想要具备某种功能
这样就能吸引用户。所以我是
我将在这里创建用户，并且它是
将会是一个异步过程
我们将尝试实现的功能
检查是否有会话
该用户。现在，为了做到这一点，我们将……
假设 const session，我们就可以使用它
账户变量类似于我们之前做的
这里用于创建和登录。我们
可以使用
account.get 需要等待一段时间。
因为这会返回一个 Promise。所以，敬请期待
account.get 并且如果存在有效的
然后我们就可以开始会议了。
返回，它会将该值设置为
会话变量。所以我们可以设置
用户与此会话相同。现在如果
还有其他错误吗？如果有的话……
没错，我们肯定能抓住那个
错误。说实话，我们只是要去
我们要做的就是将用户设置为相等
为空。我们其实并不想这样做
显示任何内容，因为它不是一个
问题。对用户来说，这不是错误。
未经认证。这只是意味着
他们不应该有这种权利
应用程序的其余部分。现在，我们可以
每次都调用这个获取用户函数
O 提供商进行渲染。所以，就其而言
初始渲染，我们可以称之为。以及
这样做，我们将使用“使用”
效果钩子。这个钩子，就像你们中的许多人一样
可能知道，它基本上会运行并且
执行代码时，当代码执行时
页面首次渲染或屏幕
首批渲染图。我们必须确保
我们把这个空的依赖数组放在这里，所以
实际上它并不是无限的。
刷新并重新加载此组件。所以
在这里，我们直接打电话
获取用户，现在应该可以了。
假设并设置用户值
等于会话或保留它
为空。现在我们可以成功通过
该用户对这位 Uh O 提供商的价值
我们现在可以通过其他途径获取这些信息。
在我们的应用程序中。我们想在哪里使用它？
嗯，我们将在多个方面使用它。
我们应用程序中的地点，但更多
具体来说，我们希望在我们的……中使用它
布局。进入这条路线，进入守卫位置。
这边，我们想检查一下……
用户已通过身份验证。所以，
最简单的办法就是我们要……
实际上，请删除此变量。是
准备调用 o 的用法。所以，我是
打算说等于使用
o.在这里，我们要回去了。
用户。
嗯，然后在这种使用效果中，我
如果用户未点亮，则希望将其重定向到关闭状态
如果用户对象为空，则跳转到该页面。但
而且，如果……的话，我也不想那样做。
用户目前已跳转到其他页面，对吗？
因为那是多余的。所以，我的方法
我能做的就是实际上可以检测到什么
用户所在的屏幕
只是暂时的，而不是真正地重新定向它们
它们已经在页面外了。待办事项
我们可以使用这些片段
钩。因此，分段将有助于我们……
获取有关位置的信息
用户正在使用的应用程序。我们通过
使用片段与使用类似
路由器。而我们能做的就是我可以
检测用户是否已在 O 中
页面通过说明 O 组中的 const 等于
分成若干段。然后如果我拿到第一名
段数组的元素，那就是
如果等于 O，那么我知道它在 O 中。
0 页。呃，我们现在需要它的原因是……
因为现在我可以检测用户是否
不存在，意思是它们不存在
已验证身份，但用户不在系统中
然后让我们将他们重定向到 O 页面。
屏幕。但如果不是，则用户
用户存在且属于 O 组，
那么我们实际上想做的恰恰相反。
因为用户已通过身份验证，但是
他们看到的是登录界面。我们
谁都不希望这种情况发生，对吧？所以，我们
将他们重定向到首页。所以那些
仅此两种情况。我们不
想在这里加个 else，因为我们
不想因为任何原因而改变人们的出行方式
原因。仅有的两种情况是
我们希望将它们重定向到这条路线
如果卡片未经认证，则会被扣押。
不在 O 屏幕中，或者如果它们是
已验证身份，且处于屏幕外。
希望你们能理解。呃
现在我们必须做的一件事是……
现在就使用效果，因为我们正在做很多事情。
这里有很多不同的检查项目。我们
可能应该添加一些依赖项
因为某些原因，需要将此依赖数组添加到此依赖项数组中。
你的应用程序中可能会发生变化，你
每次都想调整这种使用效果
状态变化的不同部分。这
首先我们要在这里提到的是……
如果用户关闭更改，那么我们希望
再次运行此用法效果。现在我们
还想更改一下，呃，如果……再运行一次
片段会发生变化，而且也因为……
那么，这套逻辑的一部分将会受到影响。
具体来说，是“输入/关闭”组的布尔值
好了，现在我们基本完成了。
现在，关于这部分，我们也应该考虑一下。
关于我们使用中的以下场景
哦，这边有个小跳跃
在获得第二个
实际会话，甚至在那一刻
即使用户已通过身份验证
仅仅因为我们还没有收到回复
关于是否存在以下情况的信息
会话处于活动状态时，用户将为空。
因为我们最初将其设置为 null。所以
如果用户不在 O 组中，并且
他们是用户，这可能会触发
替换，对吧？他们可能是
即使它位于 O 页面，也会重定向到该页面。
3秒钟后我们将检测到它们
实际上已经过认证，呃……
本来不应该是这样的。所以一个
我们可以做的就是我们实际上可以
在脱离上下文的情况下创建一个新状态
该州将持续跟踪
无论我们是否正在加载
用户信息。所以我们是
实际上，这里会创建一个加载动画。
或者让我们实际显示“正在加载”。
这是一个布尔值，嗯，我把它叫做“是”。
加载用户更有意义。进而
在这个内部，我们实际上想要……
为这个布尔值创建一个状态。所以
我们假设 const 正在加载用户，并且
我们将创建一个正在加载用户集的集合
等同于使用状态，它将是一个
以 false 开头的布尔值
将是一个以 true 开头的布尔值。
因为最初我们总是会制作
请求检查用户身份。现在之后
用户检查已完成，对吗？
要么他们
成功找到会话或用户
未通过身份验证或出现错误
或者我们想设置加载状态
返回 false，因为请求已完成。所以
我们可以这样做的方法是放置一个
最后，try catch 语句中出现了一个子句。
这最终会在以下任一情况之后运行：
两个案例。所以，在这种情况下，我们只需
想将其设置为 false，因为现在它
无法加载。现在我们可以
将该值传递给 uh 值。
这里。所以我们可以传递“正在加载”的信息。
用户也是其中的一部分。现在就在这里
在我们的布局中，我们希望实现这一点。
正在加载用户，因为我们现在只想
如果页面正在加载，则重定向用户
错误，因为我们不想制造任何
除非实际发生突变，否则不会出现突发变化
信息加载完毕。所以对于
例如，如果正在加载，我们会在这里添加。
用户为假，我们将把以下内容放在这里
完全一样。完美的。现在有时
当你在外或重定向时，例如
这样，你可能会遇到一些问题。
它说的是，嗯，你正试图……
先导航再安装，但是是
因为我们还在开发我们的应用程序。所以
这可能会引发一些问题。我
我只要过来一下就行了，关上门。
打开应用，再打开一次，然后……
针对我们正在开发的特定应用程序
在。嗯，你现在也看到了，因为我们
已通过身份验证，我们没有看到
页面外不再显示。我们确实看到了
首页。那么，让我们实际开始吧。
很酷的东西。我打算做一个标志
退出按钮，这样我们也可以测试一下
正式开始前请先签退
构建核心部分
习惯追踪器。所以，我们来做这件事吧……
我要谈到 O 的上下文了。
那是我们最后要做的事。
这里。我们将创建一个函数
注销。所以我要创建
在此签名
出去。而且这个功能不需要
对此有何异议？说实话，
它只会返回一个无效的 Promise 对象。所以
我要说
承诺无效。以及注销功能
从某种意义上说，这已经相当不言自明了。
我们只需创建一个标志即可。
这里。而且必须是
异步操作，我们实际做的就是我们
只需等待账户恢复，我们就会将其删除。
会议。所以我们调用删除会话功能。现在
我们需要指定我们参加的是哪个会话。
正在删除。您可以在这里找到登出方式
用户使用当前会话 ID
删除。所以我只需把电流加到上面即可。
在此处删除当前内容
会议。当这种情况发生时，我们也希望
自动更改值
将用户设置为 null，因为现在该用户不存在。
已登录。所以我们将其设置为
无效的。所以我会将用户设置为
无效的。现在我们只想真正去做
如果它成功的话。所以我打算
尝试
在这里，我想抓住任何
错误。现在我真的不在乎了
如果用户操作失败，则显示任何错误信息。
所以我实际上会用控制台日志记录一下。
现在。呃，错误信息或者实际上
如果有错误，请一并告知。
错误。现在我想把这个牌子分发出去。
作为 O 中的最后一个函数
上下文提供程序，并允许我们访问
在首页上找到它。所以，我要……
请前往我们的主页进行操作。出色地
转到这边的标签页，然后我们去……
index.tsx。我们拥有这些基本的东西
那是我们当时在……的时候做的
教程开始。所以，我们是
实际上，我打算开始改变这一点。
少量。所以，我首先要做的事
这就是我要做的按钮
暂时就是这样。我就这么做吧。
按钮。现在，我想从 React 中获取它。
是原版报纸，对吧？我想说
登出。我也想做这个
按钮，我的意思是它已经是模式文本了，但是
我想明确指出这是模式
文本。现在当我们按下这个按钮时
想要调用登出功能。到
获取我需要的登出功能。
再次叫停
钩住钩子，然后回到这里签到。
功能。现在让我们看看会发生什么。
当我点击这个按钮时。实际上，
我还可以做的一件事是，我可以
设置一个图标，我就可以添加日志了。
出去。
你会看到它现在有了这个
代表日志记录的小图标
出去。现在我点击这个，你就会
您看，我们被重定向到外部页面了。
因为我们将用户设置为 null，而且我们
实际上删除了会话。现在如果我
把 Pedro Tech 放在这里
我和鲁梅斯输入了我使用的密码
登录。实际上，让我放一个 a
密码错误。让我们看看它是什么。
他说。是的，它能正确检测到。
但如果可以的话，我会放对的那个。嗯 H
有趣的。它把我重定向回了
O 页，这很奇怪。我的意思是，我
我知道我是个……嗯……我想知道为什么。所以，如果我
回到应用里，你会看到我
可能已经登录了。我没有。
但这并没有把我们引向……
首页自动跳转。所以，这里有一个
问题就在这里。问题可能在于……
嗯，O 上下文与
登录功能。是的。呃，关于
我们希望在……之前实现登录功能
实际上，这里返回的是 null，我们
想参加这次会议，对吧？我们
刚刚创建了会话。现在我们想
得到它。所以我要说的是等待
帐户获取。然后，从这里我想……
将用户设置为等于
会议。所以现在的问题是，如果我
退出登录，然后我过来，我把
佩德罗科技
朗姆酒
atgmail.com，我输入了正确的
输入密码后，现在应该可以进入下一个页面了。
首页。完美的。我这就保存
这样我们就不用保留密码了
把它放好。完美。现在我们有了
问题已成功解决。那么，我们开始吧
开始搭建这个主页。我们开始吧
好好想想。我们想要创造一个
习惯追踪器。并养成习惯
追踪器，我们希望有不同的标签页
底部那些即将
代表我们不同的组成部分
应用程序。所以，我们具体有三个。
我们应用程序的不同部分。我们要走了
想要添加习惯页面，比如
屏幕。我们将拥有这套房子
屏幕。我们还将有一个
屏幕让我们看到条纹
我们一直以来养成的习惯。
嗯，完成了，对吧？所以，我们继续
记录我们所有的习惯
每天都要完成，而且我们一直坚持
追踪最好的那些，嗯，在另一个地方。
页。现在，为了做到这一点，我们想要进行调整
我们的标签导航器实际上与此相匹配。
还要稍微改动一下样式。
因为它与风格不符
我们在 React Native Paper 上使用它。
所以，我真正想做的是，我实际上会……
请移步至这边的布局图。不是这样
一。呃，其实是的，就是这个，因为我们
这里有标签页，我想添加
这个标签页里还有更多内容
选项，如果你还记得的话，就是这样
我们对这个标签导航器进行了样式设计。所以，方式
我要做的第一件事就是这件事
我想设置一个页眉样式，
我要应用的标题样式是
我想应用背景颜色
标题。那么它的作用是什么呢？出色地，
这是我们真正改变现状的一种方式
这里标题部分的样式是怎样的？
嗯，这取决于你走的路线。
例如，如果我设置了
背景颜色改为紫色。我甚至都不认识。
我觉得是的，它确实是一种颜色，但是
是的，它会变成紫色。现在，
我们实际上想把它设置为
我们用的那种米白色。
一直在使用。所以我把它设为F5。 F5
F5。然后，我还想添加一个标题
可见阴影。所以标题阴影可见
我会把它设为 false。所以我删除了
就是这里这行字。然后我打算
应用标签栏样式。还有标签栏
样式将专门适用于此。
这边是一部分。现在来说说标签栏
风格方面，我想使用相同的背景。
将颜色设置为标题。所以我们会设定这个。
我们还会稍微改变一下颜色。
然后我想设置一个边框顶部宽度。
所以这只是顶部的宽度，
我想把它设为零。我想设置
将海拔高度设为零，我想设置
将阴影不透明度设为零。你会看到
所有这些改变基本上都消除了
就是上面那句话。现在我也想
改变活动颜色和
不活动的 um 标签。正确的？所以标签
酒吧活动活性色调颜色。所以对于
例如，现在就是家。呃，我们
想把它设置为等于这个颜色
#6200E，而且有点
紫色是为了和纽扣颜色搭配。
现在我们对……做同样的操作。
非活性色调颜色。所以我会改一下这个
到
不活跃。现在这个要……
只是一堆六。所以是 666 666。
完美的。现在你可以看到我们可以
在它们之间切换，看起来很多
更好的。现在我确实想稍微改变一下。
图标和每个图标的名称
标签页。好了，我们有房子了。
但这不会是家
屏幕。这将成为主要习惯
屏幕。如果你还记得演示的话，
我们有一个标题为“
今天的习惯。这就是我们
将会放在首页上。所以
索引屏幕。所以我们打算这样做
这样做是为了改变……
今天的习惯标题。
我们来换个角度想想。现在是标签栏
图标，我想做的其实是……
我想用另一个图标，但我没有
想在专注和专注之间切换
像以前一样，注意力不集中。我
只想留一个。而我，就是那个偶像
即将使用的叫做
物质共同体
图标。我们进口的方式是这样的：
我要来到这里，站在顶端，我是
我要删除这条。我要
导入
物质共同体
图标。这实际上会是一个“我们”
我要拆解它，我只是
直接从向量中获取
图标。现在，我想通过这个表达
请指定我想要的图标。以及
我想要的图标是因为它就像一个
每天都这样，就像你在展示什么一样
今天的习惯。我想放一个
日历。所以我要放上图标
今天就用日历命名吧。而且它
今天给大家带来一个很酷的小图标。
现在，很明显，它看起来非常小。
所以，我要把尺寸放上去。
比赛和颜色
比赛。现在来说说尺寸。我的意思是，我们是
我们已经从中看出了一些颜色，但是我们
还需要确定尺寸，所以
完美适应。你可以看到
图标大小现在变为
调整标签页界面。现在是第二部分
我们想要的是一个屏幕
呃，连胜。就是那个
打算走中间那条路。我们没有
还没做出那一页。我们会这么做的。
马上就好，不过我们先创建这个
首先是屏幕。所以，我想
将其改为
连胜，我们将把标题改为
连胜。现在，图标将是一个
图表
这条线，其余部分应该保持不变。
相同的。现在，它没有出现是因为我们
我们还没有那个屏幕，
但我们会制作最后一个。
这将是添加习惯页面。
所以，我们要说的是，呃，养成习惯，
我们将改变这一点，以培养习惯。
这里的图标将是……
加
圆圈。完美的。现在，让我们来制作这两个
其他页面，呃，连胜和
我们之所以有这种广告习惯，就是为了拥有它。
已经。我打算……我打算重复使用
这。所以，我要把它改成
连胜。我会把这个改成连胜/连败。
页面或屏幕上出现条纹。现在我们有了
那。糟糕，真奇怪。为什么会这样？为什么会这样？
这样刷新了吗？是的，我会
现在创建另一个页面。我真的会
复制此内容。我把它粘贴在这里。我们将
养成添加的习惯。我会改变这一点。
养成习惯
屏幕。完美的。现在你看，我们有
获得添加习惯和
屏幕上出现条纹。现在该标签页仅显示
连胜/连败。所以我其实想
找出原因。所以我打算……
再次刷新应用。所以让我拉
搞定。我就先把这个窗口关掉吧。打开它
再次。嗯，希望标签……
底部标签导航器将进行更新。
是的，确实如此。有时候你不得不
照做。虽然有点烦人，但是
任何。所以你可以看到我们现在有了
我们要去的三个不同的屏幕
正在使用。现在，我想做的是……
只想完成最后一部分
我们这边的布局是因为这里有一个
还有一些我们尚未添加的内容。
所以，我喜欢做的一件事是……
我开发的应用程序我想添加一个安全功能。
区域服务提供商。这将确保我们的
应用程序的 UI 组件会避开以下区域：
可能会受到诸如以下因素的阻碍：
设备凹槽和状态栏。所以，就是这样。
这只是我们保持屏幕稳定的一种方法。
保持我们的应用程序能够适应屏幕。
安全的方式。所以我打算这样做
这就是我要把它放在周围的。
路线卡，但也有 O 下面
提供商。我要把保险箱放好。
区域
提供商。我还要呃，把
纸张供应商，呃，就是一个
我们需要从 React 获取提供者。
原版纸。嗯，我忘了加上它。
之前，但我们可以把它围绕这个来放置。
安全区域提供者。所以纸张供应商
我在这里也会这样做。完美的。
现在我们差不多完成了。
我这就结束，我们可以开始了。
正在构建我们的首页。所以，这里是……
我们将在这里展示所有内容
习惯。但要养成良好的习惯，我们
需要创建广告习惯页面。以及
制作广告习惯页面，我们必须有
我们的应用程序数据库已设置完毕。所以，这个
这是我们真正开始的部分。
在我们的项目中搭建数据库。
我们已经设置好了，但是我们没有
设置数据库。所以，我要来了
这里是应用程序的数据库部分
我要点击“创建”。
数据库。在这里，我想给予
向此数据库添加一个名称。我要
可以叫它习惯数据库之类的。
这。然后我们要点击
创造。它将创造出
数据库对我们来说很重要。现在，我们需要保持
追踪此ID，因为这即将发生
用于连接它。所以，我是
准备来这里
我们和我打算创建一个展览。
公众认可。其实，我还是打电话吧。
它就是数据库或数据库ID，就像这样。和
我直接把它粘贴在这里。现在，我们开始吧
回到这里，我们想创建一个
收藏。现在，一项收藏正在进行中
就像一张桌子，对吧？呃，里面
这个数据库。所以，我点击“创建”。
收藏品，我们想创造……
第一辑。我这就创建一个。
目前。呃，我们会有两个，但是
第一个就是
习惯收集。它只会……
记录下你所有的习惯
尝试追踪。所以，我要点击
创建时。它将给我们带来
这里是习惯收集。我需要
同时复制此ID。所以，我要走了
打开 VS Code，我们开始吧
为此创建 um 变量。患病的
直接复制这段文字，粘贴到后面。
这里。我会把它改成
习惯
收藏编号。然后我就直接复制。
把这段文字粘贴到这里。完美的。现在，我们
需要创建以下属性：
将存在于此表中。就像我
如前所述，这不是一个 NoSQL 表。
正确的？这是一个关系型数据库。所以，我们
必须定义结构如何
数据即将到来。所以我们开始吧
转到属性选项卡，然后点击
创建属性，我们可以选择
数据类型之间有什么区别？
成为该属性。现在来说说这个。
下表列出了我们需要的属性。
第一种方法是养成习惯。
你想跟踪哪个用户
是我自己做的。所以我们要创建一个
用户 ID 字段。现在我的尺寸就
准备把它放到 th00and。它不
非常重要。这只是尺寸而已
细绳。既然我们选择了字符串，呃，我们
可以在这里设置一个默认值，但是
我不会放一个。呃，我会
选择此项可将其设为必填项。和
然后我就可以点击创建了。只是
我们要说的是，我们现在正在存储
用户ID（字符串形式）。现在我想
创建一个新属性，它将
成为该习惯的名称。所以我会
创建一个标题，我会再次添加一个
th00and 作为长度，我会点击
如有需要，我会创建。现在我们是
打算对一大堆人做同样的事情。
还有其他的。所以，我就跑吧
穿过它。我们将有一个
对每种习惯进行描述。
我们将把它列为强制性要求。和
我点击创建。然后我就觉得
实际上，下一个是整数，而不是
因为我们想跟踪进度，所以需要一个字符串
是连胜场数，对吧？对于每
这些习惯。所以，创建连胜/连败统计。
你可以设定最小值或最大值。
尺寸。我最低会填零，因为
显然，你的连胜纪录可能会变成负数。
计数。我不会设置默认值。
但我会把它变成一项强制性要求。我会
点击创建。现在，我们想要拥有
另一个字符串，仅用于跟踪
用户上次完成此操作的时间
习惯。我再放一个 th00 和
我会把它列为必选项。最后，
我其实还想说还有两个。我
想记录一下频率。所以，
频率，比如多少次
比如你多久想完成一次这个
习惯使然，对吧？有些习惯可能是
每天都需要一些东西和一些习惯
可能是每周都会发生的事情。所以
我们将把它变成一个选项。
我会把它列为必选项。最后一个
这只是养成这种习惯的日期。
已创建。所以我要创建一个
在现场再次创建了 th00and。和
我一定会成功的
要求。完美的。现在我们有了
我们将使用的表格
这个项目。现在要使用这张表格，
我们将回到我们的代码。
这里。而我想做的是，我想……
连接我们拥有的数据库 ID
导入到我们的实际数据库中。所以我们将前往
这里是 appite.ts，我们将创建一个
从新接入点访问另一项服务
有料。这项服务将是
数据库服务。我们还会传递
客户端，但我们称之为数据库。
现在，我们要创建一个变量
对于每个环境变量
我们这里有，因为我们要走了
需要不断地给他们打电话。
所以，就是这个和这个。呃，什么
我们要做的就是我们要……
在这里创建一个
数据库
ID变量。我们将使它们相等。
到
过程
环境。记住要把它弄成嗯。
实际上，确保类型正确。然后我们就
打算做同样的事情，但是为了……
习惯收集 ID。所以习惯
收藏
我们还会复制 ID 的值。
NV，呃，不是指数值，而是指……
变量，我们会把它放在这里。
完美的。现在我们将导出此内容，以便
我们可以在不同的部分访问它。
我们的应用程序。
现在我保存一下，我们去……
添加习惯页面。所以我们可以先创建
培养习惯的能力，使我们能够
然后就可以在今天的习惯中看到它。
屏幕。那么，让我们像往常一样开始吧。
此屏幕的用户界面。让我们思考一下……
我们想要的是什么？嗯，我们已经有了
风景不错，对吧？但我们也希望拥有
嗯，类似于登录页面。我们想要
添加标题输入框。我们
想就此发表意见
描述。我们希望拥有一个
按下按钮即可添加习惯。呃，还有我们
想给我们一个选择的地方。
无论这种习惯是否是你
想每天都做，做你
想按周还是按月进行？所以我是
首先在这里创建输入。
我们将创建一个文本输入框
React Native 论文，我们将……
贴上标签。第一个标签
将成为标题。然后我们会放一个
模式，其模式将是
概述。
现在我也会做同样的事情，但是……
我们将为了……而这样做
描述。然后我想创作
我们真正可以选择的那部分
不同类型的
频率。目前，要做到这一点，
有两种方法可以做到。什么
我喜欢做的就是使用分段式
按钮。所以，分段式按钮就是这样。
基本上要制作一系列
就像我们刚才描述的那样，按钮
它们将紧挨着彼此
其他。所以我要在这里创建一个
分段按钮，我们可以传递一个
这里是按钮的值。它基本上是一个
我们正在列出一些不同的按钮。
将会拥有。现在，为了通过这项考验，我们有
传递一个看起来像这样的按钮列表
是这样，对吧？它看起来好像有一个
它有值并且有标签。
现在第一个按钮的值是
例如，每天都会是或
类似这样的东西，标签可能
每天都要这样做。现在你看，我们
设置一个用于每日选项的按钮。
现在如果我复制这段代码并再次粘贴
您现在可以看到我们有两个按钮。这是
它的作用是什么？现在我们有办法做到这一点
实际上，这样做更容易，我们可以直接
上面这里可能是一个列表
称为
频率。我们将它设为等于 a
列出清单，我们就会提供所有选项。
日常的，
每周和
每月一次。然后我们就可以循环了。
通过这个列表，像这样
频率分布图。并且循环
通过它，我们可以获得具体信息。
频率，并将对象设置为相等
该值即为频率和
即将成为的标签
频率，但实际上我想做的是
我不想看到它，它会
比如每天、每周、每月。我想要
首字母大写。我的方式
我打算这样做，就是我要得到……
第一项。所以我们会说 char at
位置零，即第一个字母
但我并没有仅仅渲染那个画面。
想把那个字母改成大写。所以你看。
现在变成大写，然后我想
基本上就是把内容添加到这个字符串的末尾。
字符串的其余部分。为了做到这一点，我
只需从字符串的开头将其截断即可
第二个字母，现在我把首字母大写。
第一个字母。完美的。现在我们有了
我们最少的分段按钮列表。
但是它提示错误。
因为我们需要通过几个
其他事情，比如当你……时会发生什么
对此进行更改等等。但我们会继续
目前就先这样吧。我们还要
用风景来包装它，因为我们
想把它设计成非常特定的样式
方式。
然后，我们想在下面放置……
按钮，这个按钮将成为
添加习惯按钮。我要放弃了。
模式为
包含。为什么给我们一个
错误？我们需要从导入按钮
React Native
纸。完美的。我还要补充一点。
习惯。现在按钮在这里了。
完美的。现在让我们添加样式。
这。我先添加样式名称。所以
我们将在这里提供一种视图风格。
我们将把这个叫做
样式.容器。我们也没有
尚未创建。我们可以把它创建下来
实际上，就在这里最底部。所以我会说
样式等于
样式表。呃，我其实会让我……
从 React Native 导入它
自动地。是的。然后我就要走了
也就是说
创作，我们就保持这样。
目前。但我们会创建一个容器
风格。我们还将创建一个
我们将应用以下输入样式
两个都
输入。然后我们想要一个用于这个
看法。所以我打算称它为……
频率
容器。我们还会为……做一份。
分段式“呃”按钮也是如此。所以我会
此处应用样式等于呃实际上
我直接粘贴这段话。所以我会说
分段
按钮。最后，让我们一起努力吧！
添加习惯按钮。所以，我们就这么办吧
调用此按钮。现在，让我们来应用它。
这。让我们直接创建样式。
下面这里。第一个是
容器。以及我们想用……
容器是我们想要首先设置的
灵活调整为一，你会看到
暂时什么都不要做，但当我们添加
填充到 16，嗯，它会有点……
整理杂物。我们还想设定
此屏幕的背景是
我们所有用途都使用的颜色。
所以我们说 F5 F5 F5。呃，那么我们
实际上需要设置背景颜色
不是
背景。然后我们就可以就此打住了。
容器。我们会进行一些造型设计。
为了
输入。现在来说说输入，我们想要……
只需设置底部边距即可
16 留出一些空间。然后我们将进行……
同样的事情，只不过是针对频率而言。
容器。所以我们会这么做
频率
容器。现在来说说频率。
容器，我们把它做得更大一些。
利润率最低。呃，不，不是这个24小时。
我的意思就是这样。现在我们将复制
再次。我们会把它粘贴在这里。我们将
将此按钮样式改为分段式。现在
这个与输入内容类似。
我们在这里留出一些余地。
最后，我们希望创造……
按钮需有边距
以绝对优势位列前八。完美的。但
我实话实说。我觉得我觉得
这看起来太大了。我要
实际上应该是八。而我想
制作
我觉得这样可以。是的，
实际上。让我去掉样式吧
为了这。我认为我们不需要它。
呃，这是关于“我删除了吗？”的问题。是的，我
已移除分段按钮
以及按钮。是的，这样可以。
React Native Paper 添加了很多样式
自动完成，这对我们来说太好了。
现在，这个就位于顶部。
当然，如果我愿意的话，我也可以这样做。
证明内容居中是合理的。呃，
然后一切都居中了。呃，你
如果你想的话，可以这样做。呃，我
实际上可能就保持这样了
因为我喜欢这种风格。嗯，我
同时将此处的边距下限设置为 8
只是为了让我能做到，而不是这个。
呃，我其实只想设置一下
实际上，我会移除底部边距。
这里。实际上，我会保持这样。
这。这只是让我们更容易……
看看吧。我认为这应该不错。
走吧。现在，让我们添加保持逻辑
跟踪用户正在输入的内容。呃，我们
想关注这个标题，
描述，以及频率，
正确的？所以，为了做到这一点，我们将……
使用状态。
那我过来一下。我将在这里创建
标题
状态将是一个
字符串，我们将从一个空字符串开始。
细绳。那我就直接复制这个。患病的
粘贴三次
次数。我要把它改成
描述。我要把它改成
放
描述。最后一个即将到来
成为频率。我要改变
这与频率有关。我会改变这一点。
同时还要设置频率。
现在这种类型的问题是，我们实际上
根据这个数组创建一个类型。所以呢
我要做的就是我要创造
一种叫做
频率。它的类型是
实际上会是一个对象
先写类型，然后我再写行程。
频率阵列。我可以这样做
TypeScript。我只是在制作钥匙。
选择其中一个选项，然后它将
uh 的值是一个数字。所以我会说
这里要讨论的频率类型是
频率，最初将是
日常的。这其实很有道理。如果我们
咱们回到正题吧。
实际上，初始频率已设定好。
这项属性应每日保持。我认为
这或许对我们来说是件好事。
嗯，我把它设为每天一次。现在，我们出发
感谢大家的意见。
特别的。现在，频率将变为
有点不一样。我们不是
将使用 onchange 文本。是
实际上我得用一个onv了。
价值改变，因为这就是原因
分段式按钮允许我们这样做。而当
按钮发生了变化，你
点击，我们将进行回调
实现该函数，我们可以访问其值。所以
这处房产位于此处
我们点击的按钮。现在我们想要的是
我们要做的是将频率设为相等。
将值表示为频率。现在我们也
必须将初始值设为某个值。
已选择频率。所以我们要……
此处的值等于频率。
所以那东西是红色的。
波浪线是因为现在我们可以选择了
每天作为首要价值，我可以
在它们之间切换。你可以看到
有一些风格
您点击的分段按钮。现在开始
添加习惯按钮 我想在……的地方
包含模式。显然我们是
准备在……的时候按下按钮
提交后，我还想禁用它。
如果没有标题或没有
描述。所以用户甚至都无法……
如果他们还没写，就选它。
有什么进展吗？现在我认为是时候了
让我们来处理您添加时发生的情况
养成习惯，并成功地将物品添加到我们的
数据库。所以为了做到这一点，我要添加
这边正在印刷，我们要……
调用名为 handlesubmit 的函数。
现在我们需要创建这个函数。
我们打算在这里进行。是
打算说常量句柄
提交。我们必须把它变成一个
异步函数，因为我们打算……
我正在访问数据库内容，而且我想要
只能添加 我想制作
在确定用户存在之前，我们
请务必提交。所以我打算
在这里创建一个用户，并将其值设置为
使用 o。
如果用户不存在，那么
我们直接跳过这个函数，这样我们
可以确保用户在以下情况下存在：
我们正在努力养成一个习惯，因为
我们将获取以下信息：
用户，尤其是用户 ID。现在，
在这里，我们将按以下方式进行
处理添加用户或添加
习惯。所以我们需要
等待，然后我们将调用数据库。
我们在应用程序中创建的对象
文件，我需要点击“创建”。
文档。创建文档将添加
添加到收藏品中。它将增加一个
文档到集合和文档
这只是我们餐桌上的一个入口。现在
要创建文档，我需要传递一个
数据库ID。我需要养成一些习惯
集合 ID，我需要传递该 ID。
我正在创建的文档中，如果
你还记得我可以轻易地通过以下方式创造吗？
使用ID进行唯一验证，但我需要……
从 React Native 导入此 id 对象
apprite 然后使用独特的
功能。现在我们做完这些之后
现在我们可以传递一个对象，
表示属性结构
我们正在创建的这份文件。所以
如果你还记得我们需要做的第一件事的话
传递的参数是用户 ID，我们会获取到该 ID。
通过输入用户点号，我们就能得到
id。用户，如果你还记得的话，就是呃
我们从使用中获得的会话
离开。第二件事就是标题。
显然，我们从中得到了标题。
我们创建了用于跟踪状态的列表
这。所以我们直接传递标题。出色地
也请提供传递描述。一样。
然后是频率。一样。但是后来
还有几件事。为了
例如，对于连胜/连败次数，我们将
初始值为零。所以，我们只能通过了。
将其设为零
这里。然后我们想传递最后一个
完全的。最后完成的是
默认日期为今天。所以，我们将
新的
将日期点转换为 ISO 字符串。这将
基本上就是创建当前日期。出色地
做同样的事情，呃，还要加上
但日期，但适用于创建于属性。
现在我们有了我们的结构。
目的。当我们点击这里时，它应该
实际上，请将此作为文件发送给我们。
桌子。但当我们成功创造出一个
养成新习惯，我还想做的是……
希望能回到我们以前的地方
以前是因为我们养成了习惯。
现在我们确实可以看到这种习惯了。
出现在屏幕上。所以我打算
点击
路由器.返回。嗯，这应该可以导航。
你回到了以前的位置。现在
显然我们无法获取
路由器在这里。那我们就这么做吧。康
路由器等于使用
来自专业路由器的路由器。那将
请指引我们返回。但这可能会失败。
那我们来试着抓住它。所以我们会说
试试看，我们肯定能抓住任何机会。
错误。在这里我们可能想要
处理错误。所以我打算……
在此处创建错误状态。所以错误和
设置错误，这将是一个
状态是
字符串，当出现错误时，我们
必须检查错误是否是实例
错误，对吧？我们以前也遇到过这种情况。
我们将误差设置为等于误差值。
因为这样我们就知道有 DOM 消息。
该错误对象中包含一条消息，但是如果
不是
呃，就像，我们想把它退回去。
出色地。否则，我们就直接设置
错误指向一些类似这样的通用信息
创建时出错
习惯。完美的。现在我们来处理
创建时显示该错误
习惯。我们会把它放在按钮下方。
如果有的话，我们会在这里添加 u
错误。所以如果错误属实，那么我们将
做和我们在这里做的一模一样的事情
页面外。实际上甚至会
照搬我们那里使用的逻辑。我们就这样
复制此内容。我们会把它放进去。
这里。呃，我们现在需要获得以下权限：
主题和我们之前做的类似。
所以我们需要……嗯，调用使用主题。
React Native 论文中的 hook。所以使用
主题只是为了让我们获得颜色
记住。呃
这里发生了什么？
哦，我们需要从……导入文本
出自 React Native 论文，而非 React
本国的。正确的。所以，我们只需导入即可。
这里是文字。现在错误应该
走开。完美的。现在，我们来试试。
养成一个习惯，我们来看看会发生什么。
事情发生了。我们把它放在这里，嗯，我们来想想
一件我可以每天都做的事情。呃
冥想，因为这就是标题，然后我
放五
几分钟
冥想
每天早上，我们都选择这样做。
每天都会点击添加习惯。它说
当前用户无权访问
执行请求的操作含义
我们正在显示错误
正确。但你可能想知道
为什么我没有获得授权？出色地，
因为如果你曾经和任何人共事过
后端即服务，例如
Superbase 或者 Firebase 或者在这种情况下
Apprite，你知道你需要设置
用户适用的策略
已获得授权，可以对您的设备执行操作。
表格。所以我们这样做的方式是：
这里是设置页面，我们往下看。
我们看到权限了吗？你可以
选择谁可以访问该馆藏；
文件。所以，我们需要添加一个角色
这个系列。默认情况下，没有人
可以用这个系列做任何事，
这很好，因为它保障了我们的安全。
收藏。所以，我需要点击这里。
首先添加一个角色。我需要
选择我想申请的职位。现在，
我将选择这里的所有用户。
我希望允许所有用户创建，
读取、更新和删除。并且成为
说实话，因为这个应用非常
个人意义上的，你不
接触并学习他人的习惯
我认为你基本上可以设置
用户可以做任何他们想做的事情
嗯，在这个表格里。所以，我们要……
只允许注册用户使用，不允许访客使用，这样用户才能正常使用。
该应用程序的用户通过身份验证后即可使用。
能够创建、读取、更新和删除
他们自己的习惯。然后我会点击更新。
现在我们应该看到，如果我回去
进入我们的应用程序，然后点击“添加习惯”，我们
成功养成一个习惯。现在，
我怎么知道的？嗯，
router.back 重定向到此处
今天的习惯。意思是如果我去
我们的数据库这边应该可以看到。
有一份文件是
已经制作完成，看起来和什么一模一样？
我们刚刚创建了。伟大的。我们有
已成功连接我们的 React Native
应用程序连接到我们的后端。但是现在，我该怎么做？
展示今日习惯
屏幕？好了，我要结束了。现在，
我们已经戒掉了添加习惯。我们走
进入索引屏幕，我们将要……
创建今日习惯页面。所以，在
首先，我想先说明一点：
获取我们拥有的习惯列表
桌子。所以，为了做到这一点，我打算……
在这里创建一个名为 fetch 的函数。
习惯。这将是异步的
功能。而在这里，我想……
试着抓住他养成这个习惯的机会。所以，
我要去抓一只
错误。说实话，如果存在
错误，我不想显示任何内容。
我只想在控制台输出错误信息。
错误。现在，当我获取这些习惯时，我
需要使用与之前相同的逻辑。
嗯，养成习惯。我们需要
访问数据库对象。所以我是
即将等待数据库，我们需要
从 apprite 文件中导入。现在
用于从 a 中获取文档
我们使用列表文档进行收集
功能。现在这个函数将列出
这个系列的所有文件
嗯，正如你为这些条件所设定的。
需要出示的文件以及我们的条件
我们只想列出……
用户创建的文档
目前已登录。所以他们
只看到自己的习惯。所以，我们
首先我们需要在这里放置……
然后我们需要输入数据库ID
习惯集合 ID，然后最后
你需要加上条件。所以你
可能已经明白，每
您与数据库交互的时间或
你需要将集合传递给数据库
ID 和特定集合 ID。所以
这就是我们创建这些变量的原因。
并将它们出口了。现在的条件是
看起来有点怪，但你会习惯的。
它。你需要传递一个数组，因为
实际上，你可以实现多个
状况。就我们而言，我们只是
只有一个条件，那就是
我们只想列出……
用户 ID 等于的文档
指向已登录用户的 ID。
所以要做到这一点，我们必须获取用户
这是通过使用 O 登录的。
我们将在这里创建一个查询。现在
我们可以通过这个查询来指定什么
我们这里是在做比较，对吧？它
可以是介于两者之间，包含，一个
大于或等于之类的。
我们希望它是平等的。我们想要用户
ID 字段应等于用户的 ID。
已登录。所以我们输入“等于”。我们指定
我们正在进行这项比较的领域
在。所以，用户 ID，我们指定我们什么
正在将其与……进行比较。所以我们正在进行比较。
将其与用户 ID 关联。现在这可能是
无效的。所以如果它为空，是因为用户
由于某些原因未登录，我们只是
请输入空字符串。和
那么显然就没有习惯了
空字符串。所以它不会返回
任何事物。总之，现在这种情况是
完成之后，我们基本上想要跟踪……
这条回复。所以我要创建
这里有一种叫做“习惯”的状态。而这
状态将是一份习惯清单，即
将会新增一个名为“习惯清单”的类型。
现在我们还没有这种类型。
我们需要创造它。而我喜欢的是
在我的 React Native 应用中，我喜欢这样做
创建一个名为“types um”的文件夹。所以我会创作
这里是类型。在这里，我将创造一切
我们需要成为的具体类型
在我们的项目中重复使用。而习惯是一种
我们将重复使用的类型
多次。所以我将在这里创建一个
名为
数据库.类型.ts。在这里我将
创建所有类型，包括此类型。
习惯一。所以接下来我们要……
导出名为 habit 的接口。和
这个界面实际上将会
扩展另一个接口，即
我们可以从 appite 获取一些东西。它是
将被命名为 models.doccument。但
我们需要导入模型。所以模型
文档。为什么？因为现在的习惯是……
界面将包括
我们正在使用的特定属性格式
即将开始，但同时也会
包括一些普通物品之外的额外东西
我们从eprite那里收到的文件
也可能包括。所以我们这样做
这就是我们在这里具体说明的例子。
habit 有一个用户 ID，它是一个字符串。
它的标题是一个字符串。一个
描述，类型为字符串。它还
有一个
频率，这是一个字符串。连胜
计数对象是一个数字，而不是一个字符串。
它是唯一一个不是绳子的物体。
还有一个不太完整的字符串。
以及在创建时生成的字符串。
完美的。现在我们可以利用这个习惯了。
这里通过导入类型来表示
从数据库中选择类型。现在当我们
创建响应，我想设置
习惯与反应相同。但是
响应将返回更多信息
习惯清单。为了得到那个，我
实际上，我必须提交回复文件。
我想把它塑造成这样
相当于一份习惯清单，这样我们
具体要知道是什么类型。现在
在列出清单之前，我想先说明一下。
把它记录到控制台，这样我们就能看到是否……
实际上收到了回复
文件。让我们看看结果如何
由此而来。那么，让我们运行这个获取操作。
用户每次都会启用习惯功能
屏幕显示到此。所以我打算
创造使用效果，并在此使用中
效果是我们要传递一个依赖项
数组，它只是用户的数组。
以防用户发生变更。并且
这里我想把 fetch 习惯称为“获取习惯”。
功能。现在如果我打开我的终端
这里可以看到我们有一个控制台日志
它包含了以下信息：
一、频率或头号习惯
我们创建的就在这里。
用户 ID 包括
描述标题和频率
等等。所以我们正在恢复
数据正确。呃，我们也是
将其设置为该状态。所以现在我们可以
实际上开始构建适应性的用户界面
到那个州。那么我们该怎么做呢？
这？好吧，我要把这个删掉。
这边的东西。让我们从……开始
一切从零开始。现在从这个角度看过去
在这里，我其实想先从制作开始
有点像这个页面的标题。所以
我打算创建另一个视图，即
将成为标题。而这一次，
我们将收到一条短信，我是
准备进口，嗯，我希望它能进口。
不，它不是来自 React Native。我
想从 React Native 导入它
纸。然后我希望这段文字是
说今天的
习惯。完美的。现在我想放一个
这是它的变体。该变体将
成为头条新闻
小的。然后我想放一个按钮
这里在标题上，即将
就是我刚才提到的注销按钮。
意识到我们删除了。对不起，
让我指挥这里的一切，因为我
想找回这个按钮。进而
我只需按 Command + Shift + Z 就行了。好了，我们开始吧
回到我们之前所在的地方。然后我会放
下面的按钮。呃，但是我们需要
从 React Native 论文中导入此功能。
完美的。现在，我们有了这个按钮。
这里。现在，这将是……
标题。所以，在这个标题下方，我们想要
列出习惯清单。所以我们想要
首先检查是否没有
习惯，因为如果习惯清单是这样的话
习惯长度长度等于
零。然后我想显示一个视图
这里只有一段文字。
说习惯让你感到空虚。
正确的？所以我要说的是，不要养成任何习惯。
然而。添加你的第一个习惯。
如果事实并非如此，而我们都知道这一点。
如果不是，呃，那么我们就显示列表。
习惯。为此，我们需要循环
通过习惯阵列。所以，我们会说
habits.m 地图，我们将逐一查看。
他们中的。抓住个人习惯和
关键在于
这里。我们将创建一个视图
为了养成这个习惯。所以，我们在这里做一个
看法。目前我们什么都不会做。
虽然有它，但我们会把它创造出来。现在
习惯显然不是空洞的，所以我们……
没看到这条信息，但如果这是……
相反你会看到我们会看到
目前还没有任何习惯，请添加你的第一个习惯。
呃，但我们显然想保留呃
养成这样的习惯。现在让我们来创建……
从个人习惯的角度来看，习惯。所以对于
我们想显示一些信息
关于这个习惯。第一个是我们
想输入一段文字。现在，这段文字是
标题就叫这个吧？所以，我们是
准备放在这里
嗯
习惯.标题。另外，我再放一把钥匙。
对此视图，以便我们能够正确索引
这。现在，我们正在显示标题
这种习惯。现在，我们来做同样的事情。
描述。所以，我们会展示
描述一下，然后我想……
现在创建一个视图，以便我们可以显示
嗯，连胜纪录。所以，我要创建一个
看法。我要关闭这个视图。和
在这里，我们将创建另一个
看法。我们将关闭另一个视图。
而在这个不同的视角里，我想……
添加图标。我打算放
类似 Material 社区图标
我们之前做的事情。而在这个图标上，我
想使用名为“火焰”的图标。
它有点像火焰表情符号。和
那是为了代表那
个别连胜。我打算放一个
尺寸要稍微大一点。
我打算把它改成18。而且我还想
把颜色涂成这种颜色
这边。这是一个话题标签
FF9800。它会是橙色的。
完美的。现在我想添加一段文字
这种习惯的实际持续时间。所以，我是
我打算在这旁边放一段文字。
图标，而且它将包含习惯
点连击数。我会纠正
旁边显然是零。
默认设置，但我打算把日期设为“日”。
条纹。好的。现在，在此之下，我想……
输入频率，对吧？所以，下面是
我想表达一下我们刚刚结束的观点。
另一种观点。这将是
频率徽章，频率视图。
在这里，我就放一段文字，内容是：
这种习惯
频率点字符位于零处。类似于
我们之前为了获利所做的一切，我们……
转为大写
它加上习惯频率点
从第一片开始切片。呃，我需要
关闭此窗口。对不起。是的。现在我们
获取频率，首字母大写
首字母。所以我们每天都能看到。现在
显然，这种造型风格
真丑。呃，所以我们确实需要申请
稍加修饰。所以我会做我们该做的事
上次就是这么做的。我再补充一句……
先处理各个要素，然后再处理其他要素。
应用样式。所以，我做的第一件事
我想做的就是把这个改成
然后我想应用一个容器。
用于标题。所以我们就称之为
标题。那么我们可能就会有一个了。
标题。所以我将这部作品命名为……呃
我们已经不需要了
为了退出按钮，什么都愿意做。
那么，我们将为此创建一个。
我们将它称为空状态。和
我们也会为文本做一个。是
我打算这么称呼它
空状态
文本。至于习惯方面，我们相当
很想把它当作一张卡片来对待。所以
我打算把这个叫做
卡片内容。
嗯，那么对于这边的文字，我想要
拥有一张卡
标题。那么，关于这一点，我希望有
一张卡片
描述。然后，对于这种观点，我们
这是页脚，对吧？这
是指下面的东西，或者有点像
在卡片的底部。而且它会
包括连胜和
频率。所以我要把这个叫做……
卡片底部。现在，频率或
条纹视图。我们将把这个叫做
这
连胜徽章。我们会为其添加一些风格元素。
文本。我打算称之为
连胜短信。那么对于这种观点，我们是
我打算把它叫做类似这样的名字。是
我暂且称它为频率徽章
反而。所以，
频率徽章。文本将是
频率文本。现在，我们想放置一个
视图上方的额外元素，即
将采用卡片的样式。所以，
我们将使用表面。
成分。这是一篇 React Native 论文
创建材料设计的组件
用于放置卡片的表面。所以，它就这样开始了。
帮助我们更好地设计贺卡样式。所以，
我要导入它，然后我就要走了
围绕这个来解释。所以，它将要
包起来。至于地表，我们是
这里将创造一种风格，即
将成为 styles.card。卡片，我们是
还要加上海拔高度
零。现在让我们来看看我们的风格。
在这里，我们来逐个制作。
所以第一个是容器，
将会是弹性一号。呃，我们不是
我们会为任何事情找借口，但是我们是
我们将加入16个衬垫，我们是
准备添加背景
颜色
呃 # F5 F5 F5。完美的。现在我们要走了
在这里制作
标题。我们将要使用的标题是
弯曲方向。所以弹性方向是
等于
排。现在我们要证明……的合理性
成为空间
之间。然后我们将进行调整。
物品
中心。我在这里加了两个逗号。
然后我们要设定一个边际。
底部
24. 所以我们还有一些空间。现在之后
我们想要设置标题样式。所以
这边这个东西，标题是……
简单来说。我只想
将字体粗细改为粗体。
所以我们有大胆的
文本。然后，在下面，我们想开始
设置卡片样式。所以这张卡要来了
变得巨大。我们需要留有余地。
底部是18。所以还有一些空间。
在卡片之间。然后我们想要一个
边框半径为 18
出色地。我们希望背景颜色为
与颜色略有不同
整个屏幕。所以我们要走了
也就是说
F7 F2 F8。你看，这有点……
紫色的。虽然很难看清，但我能看到
它出现在我的屏幕上。呃，那我打算
添加阴影颜色，这样我们才能真正
看到一个影子。结果是0
0. 然后我要添加阴影偏移
宽度为零，但是
高度
二。然后我要加上阴影。
不透明度设置为 0.08。所以是
非常非常小。
然后我要加上阴影。
半径为
八。最后是海拔高度
是四。完美的。所以这有点像是
地势较高，可以看得很清楚。现在
我们来添加这张卡片。
内容。所以我会说卡牌内容。和
我们打算加一些填充物。
因为那里到处都是杂物。
这边。所以我们就打算……
给所有元素添加默认内边距
20个方向。而且看起来很多
现在好多了。然后我们要把卡片放进去。
标题，呃，我猜就是卡片标题
就是这边这个。嗯，为了
卡片标题，我们将放入一个
字体大小设为 20。所以有点……
大。嗯，那我们接下来要放一个
字体粗细为
大胆的。完美的。哦，我刚刚写了
卡片。让我输入卡片标题。现在
它确实会更新。然后我想放
最低保证金为四。我
其实我想把这个颜色做出来。
看起来有点不一样。我想要
涂上颜色，让它……
#222 3B。所以严格来说，它不是。
黑色的。我不知道你是否能做到
请注意，严格来说它并不是黑色。
现在我们复制这个，然后我们将要……
撰写卡片描述。所以，卡片
描述中，字体大小将是
较小的将是15。但我们也不是。
我要把它做得更醒目。我们只想
将标题加粗。所以，我就……
删除此条。我们还能赚点利润。
底部
16. 然后我们稍微调一下颜色。
不同的。我打算把它设为 6 C 6
80. 完美。它有点像浅灰色。
然后我们想制作这张卡片。
页脚。我们需要卡片底部的元素
这是一种观点。这不是文本或
任何事物。所以就是这部分
这涵盖了所有方面。所以
我们想做的是，我们首先想……
设置一个弹性方向，对吧？我们会放一个
调整行的方向，以便……
实际上它们就挨在一起。然后我们
准备放入呃，证明内容正确性，并且
我们会在它们之间留出空间。你会发现
现在它会在两者之间形成一个空间。
两个不同的元素，呃，它们是
在这个柔性结构内部。然后我想
将所有元素居中对齐。完美的。
这样它就能垂直对齐了。现在是
页脚内的项目我们有
连胜徽章。而我们想要的就是这个。
为行添加一个弹性方向。我
我认为这也是一种观点。呃，所以我们会
把它放在行里，然后我们再设置对齐方式。
居中物品。我们会把
背景
颜色，我要把它变成……
也包括特定颜色。我们将要
放 ＃
fff30。所以，这就有点像……
你知道这种淡淡的橙色色调
这个区域只是用来数你的绳子。
然后我要加个边框
半径为 12，这样它看起来就不仅仅是这样了。
像个正方形。然后我们来制作
水平方向内边距。所以这只是一个
x方向的内边距。我们要走了
设为 10。我们再加一些余量。
垂直
四、完美的。现在我只是不停地放
补充说明。呃，但是下面这里，
让我们来制作连胜文字。所以，连胜
文本，我要让它有一个
左边距六。所以，有一些
左侧留空。我打算放一个
颜色
#
FF980。你会看到，呃，这将
把它弄成有点像橘子的颜色，但不要太橘。
橙色，嗯，不要太浅，以至于你
确实能看到。然后我们将要
将字体设为粗体，以便您能看清它。
甚至更好。所以字体粗细，我们来谈谈字体粗细。
将其设置为粗体。完美的。然后
最后，我将字体大小设置为 14。
现在，我总是建议使用粗体。
在处理与以下情况相关的事务时，过度使用粗体字是不可取的
一个应用程序，因为呃，与类似的东西不同
一个网站，呃，在你的应用程序上，制作东西
大胆的色调看起来真的很好看。
嗯，我总是倾向于过度关注
具体事物，例如特定元素
我想……呃，与众不同，呃，或者
在页面上很独特。我做到了
大胆的。然后我想复制整个过程。
我们要做类似的事情。
除了频率之外，别无其他。所以我们是
准备制作一个频率徽章
我们将制作一份频率文本。
现在有一些变化是我们曾经的
会给他们做这件事，对吧？所以，对于
例如，对于频率徽章来说，
颜色不会是这样的。它是
将会是
ED
7F6。这样做的好处是，我们会成功。
有点紫色。为了与之相匹配，我们
我要把这个的颜色改成7。
C 4 D FFF，这将使它有点像
还有紫色。现在又有了另一个变化
我们需要做的是，呃，我要……
移除对齐的弯曲方向
这些东西，我还要……
将水平内边距更改为 12。
垂直方向的内边距可以相同。
现在这里剩下的边距并不
这样做是有道理的，因为我们只在这里放了它。
因为上面有个小图标……
连胜，对吧？所以我们不需要这个。所以
我会把它移除，现在它看起来会是……
好多了。而且我们还可以做的是
你看，上面写着“每日”。
因为我们就是这样把它保存下来的。
是它的大写字母 D，然后是呃……
整个词都是“每日”，对吧？它有
之后均为小写字母。但是什么
我们可以做的，有趣的是，我们可以
实际上，整段文字都要大写。我们
可以使用名为 text 的属性
转换，它允许你制作呃
资本化转型
一个词。如果我……我可以把它变成大写
想要，而且整件事就会是
转换成大写字母
即使原始字符串并非如此
大写。现在我只是想展示一下
因为我觉得这很酷。呃，但是
我们不想在我们的案例中这样做。
因为它已经很好了。已经
大写 D。嗯，即使我们这样做了
手动操作也可以通过以下方式完成：
这里也使用了大写字母。
财产。所以现在我们只剩下……
空状态和空状态文本。
所以，我要下来这里……
让我们把它变成一个空的
状态。我会把灵活性变成其中之一。
我会将两端对齐的内容居中对齐。
我会把物品居中对齐，因为
说实话，在空虚的状态下，我们
不想做太多事情。所以，
我们姑且称之为空吧。
状态文本。我这就设置颜色。
应该是一堆六。所以，六个
六。
现在我们的线缆已经做好了。如果我想要
再增加一项，另一个习惯，我
可以过来，我还要补充一点：
例如，我们增加了冥想。我们开始吧
做
喝五加仑。我认为是五加仑
太多了。我认为是一加仑水
很好，但是，是的，喝五加仑水
水。这次我会每周都做一次。
所以，喝很多
每天喝水。
然后我会每周都做一次。它是
每天都可以，因为你可以把时间安排得更合理一些。
你一周要用掉五加仑水。然后我会
点击添加习惯。习惯在哪里？
嗯，这里没有，对吧？因为
现在的情况是，它正在获取……
我们表格中的信息是这样的
屏幕已渲染。所以现在
屏幕未渲染。它不是
正在获取数据，因为它已经获取到了。
一次，对吧？当我们有使用效果时。
只有当它再次获取数据时，它才能再次获取数据。
要么你改变用户的身份，
例如，使用户无法
已登录或如果您连接呃您的
屏幕上会实时显示变化
习惯表格。例如，我们
可以通过使用户等于来强制执行此操作
无效的。显然，那会出问题。
然后我把这个拿走。和
你会看到它会再次获取
由于用户更改，数据已丢失。但现在
这里有一个有效用户。
但我们想听听这个
自动地。当我们改变这一点时，我们
无论如何，都希望它出现在这里。
什么。所以为了做到这一点，我们这样做是……
将在这种使用效果中执行。
我们将使用这个函数
来自 um 来自 apprite 叫做
订阅功能。所以我们要……
建立一个名为“习惯”的订阅服务
订阅。而这将是
实际上订阅了一个活动
事件发生在我们的数据库表中。现在要做的是
我们必须能够获得
客户。我们可以访问的客户端
苹果。就是这件事
出口到这里。所以我们要……
请客户过来。我们将要
从 apprite 导入。然后我们就出发
也就是说
客户端订阅。现在我们必须明确说明。
我们订阅的是什么？所以这是一个
我们数据库中的表格。但问题是……
要具体说明您订阅的内容，
你必须实际创建这个字符串。
这将让Appright知道什么
表格以及您所属的系列
订阅。所以我们必须说：
我们正在订阅
数据库。所以它是一个数据库。我们有
在此处插入数据库 ID
我们订阅的数据库。所以
我们将插入数据库ID。然后我们想要
在另一个点放置收藏品和
然后指定集合的​​ ID
我们正在订阅的。所以我走了
也就是说
习惯集合 ID，然后我们想要
假设我们正在订阅
文件或任何变更
本馆藏文件。所以
整个字符串看起来会是这样。嗯
对，就像这样。所以当这位客户
已订阅，我们将执行
这个功能在这里。所以每次
这项操作有所改变。
我们正在订阅此回调
函数将被执行，
在这里我们可以得到回复
我们需要为此创建一个类型。
我马上就要在应用上成功了。
文件在这里。呃，这种类型
内容如下。呃，我会
就按这个尺寸做吧。我要
导出一个名为 real 的接口
时间
回复中会列出一个列表
事件列表，该列表为字符串和
它将携带有效载荷，我们
不知道会是什么结果，因为
这取决于我们采取何种类型的回应。
我们有，但我们会把它变成那样。
类型。现在我们需要从这里导入它。
有料。现在，在这其中我们必须……
检查不同的操作
可能会对活动造成影响。所以，在这个过程中
该项目包含三个操作，我们
想要检测。我们希望能够
养成新习惯。所以当我们创建一个
我们想要检测并展示的习惯
这边。我们希望能够
更新它，因为我们希望能够……
完成当天的习惯。
增加连胜次数，而且也许
证明它已经完成，而且
删除它，因为你可以删除一个
习惯。所以我们必须应对接下来发生的事情。
以上三种情况均适用。并且
这三种情况，什么？
发生的情况是我们只是获取列表
再次养成习惯，以展示新的习惯
清单，对吧？而我在这里想做的
我想创建一个频道。所以我是
假设通道等于和
然后我想要拿到这份清单。
这边。接下来我们实际提取一下
并将其转换为变量。所以我是
我打算把它叫做频道，因为
这是我们所在的频道
订阅。然后我就直接略过。
这里的值而不是达到
字符串。我们想重复利用这个
因为那样我们就能做到这一点了。
我们可以检查响应是否有效
点事件
do.inccludes 并且如果事件包含一个
创建我们可以通过以下方式检测到的操作
数据库
doall.colctions doall.d
文件
doall.create，然后它将指定
这仅适用于创建操作。
然后我们需要再次获取这些习惯。
所以我会说，养成获取习惯。现在我们可以这样做
这一点也很重要，你就会明白为什么了。
我们正在为他们每个人做这件事，但是
然后我们要添加一个 else if 语句。
我们可以把同样的东西放进去，但是不是
说响应事件，我们改变
这
更新后，我们还会获取用户习惯。
如果确实有删除操作，我们
还要获取习惯数据。现在，
我之所以这样写，是因为我还有其他原因。
如果他们每个人都做同样的事情
问题在于，后来我们
实际上还要再要一个。
订阅，呃，我们没用。
现在是这样，但我们显然会……
获取你的习惯信息
今天已完成。所以为了做到这一点，
我们得把这个小东西准备好。
如果否则如果否则你在这里分组。现在
我们真正想做的，是我们实际上想要的
要养成这种获取习惯的最初阶段
下面一个。所以我们要把它放进去
就像这里一样。最后
订阅之后
获取习惯时，我们实际上想要
清理这个使用效果，这样我们
避免任何内存泄漏。然后是
我们就称之为习惯订阅吧。
调用此函数时将
实际取消并退订
订阅。所以现在如果一切看起来
要开始工作，我们可以去这里添加一个
新习惯。所以，让我再添上一个习惯吧。
这里。我们来做100个俯卧撑吧。和
我在这里写下每天做100个俯卧撑。
每天都要做。点击添加习惯。而且是
破碎的。于是我弄明白了它为什么坏了。
我们必须把这一切都包装起来。
和……一起做点什么
如果
仅用于检测用户是否是
实际上就在这里，我们会把这个放在这里，现在
应该可以正常运行了。所以，当我来的时候
过来添加习惯，然后我删除了这个
我补充说，我不知道，让我想想。
另一个习惯。呃，我练过冥想。
我已经完成了俯卧撑的训练。我会没事的。
锻炼之后，我会……
在这里做推拉腿，呃，劈叉。我不
知道。我会把它当作日常习惯。添加
习惯。现在我们应该返回了。
到主页和新页面的工作
嗯，习惯应该出现在这里。现在
这完全有效。但有一件事你
如果我过来，你可能会注意到
我增加了一项每月一次的活动，比如聚会。
或者给老朋友打个电话。这
或许会是件很酷的事。呃，给某人打电话
你已经很久没这么做了，那就去做吧。
每月一次。我点击“添加习惯”。在哪里？
那？嗯，就在这里。但是如何……
我该如何向下滚动？不可能
向下滚动是因为我们没做
此屏幕应可滚动。那么，我们该如何做呢？
这样做吗？所以，为了做到这一点，我们必须来
从这里下去，我们要去哪里
我们列出了习惯清单。所以，呃
大概就在这附近。我们将要
实际上让整件事……
被 React 的滚动视图包围
本国的。现在，它就是一个滚动视图。
正如其名所示。它是
我要把这一整部分都……
可滚动。嗯，你已经看到了。
可以，但我们可以指定某些部分
就像我们想做的事情一样
风格等等。首先，
滚动时，我不希望这样
看起来像一个网站，上面显示
这个指示器在这里。所以，我们可以说
它显示了垂直滚动指示器
我们将它的值设为 false。和
然后你猜会发生什么？它
没有显示。现在你可以申请其他
嗯，这种风格有很多种，也许我们
以后再说吧，不过现在我们没事。
就这样。让我们想想我们想要什么
现在就去做。首先，我想要的
能够做到这一点就是删除习惯。
因为拥有一个
这里有很多习惯。也许我想
再做一些其他的练习题
我们该怎么做呢？嗯，要做
我想在这个上面做这件事
习惯选择界面，如果您想删除
养成习惯，你可以向左滑动它
右边。如果你想完成一个
习惯上，你可以从右侧滑动它。
向左转。所以，这就是其中的一点。
很复杂，而且存在于很多方面
不同的应用程序，但人们有时
不知道该如何实现这件事。所以，
我觉得这样做挺好的……
教教你们吧。所以为了做到这一点，我们
将会使用这个库，它
这将有助于我们检测不同之处
用户做出的手势。和
图书馆的名字暂定为……
我们将要安装它。它将
可以称为 React Native
手势处理器。所以我们用 Expo 安装了它。
它会将它安装到我们的项目中。我们
确实需要查看我们的布局才能确定。
启用它。所以我要去这里
这边是布局。我们想做什么
我们想要超越 O 提供商，我
想添加一个
手势处理程序
根视图。现在这将是
我们把它包裹在整个周围
事物。呃，供应商不足
做了个手势。我直接把这段话全部复制过来。
事物。我希望它能自动关闭。
完美的。我们想从这里导入这个
并非来自那里。我们把它导入进去。
比如说
React Native 手势处理器。我们
想要导入
手势处理程序根视图。完美的。呃
哦，我写错了。这就是它的原因
并非自动导入。完美。
现在在这个根视图中，我们确实需要
给它传递一个样式。或者你没有
也想，但我只想专门做
这
flex 等于 1。嗯，所以我们会说
flex 等于 1。我会设置这个
这里相等。完美的。现在在这个里面
在我们的应用程序中的任何位置，我们都可以检测到
用户使用的不同手势
嗯，正在制作中。我们想做的是
我们想检测他们何时做出手势。
从右到左，习惯各不相同
或者从左到右。现在，在里面
这里列出的习惯清单中，我们有……
准备绘制每个习惯的地图并进行包装
围绕习惯卡。我想制作
这是一个可滑动的组件。所以，我会
就这么把所有东西都包起来吧
可滑动。并且在可滑动的上方
在这里，我想设置几个属性。
我想设置的第一个属性是 I
想做一个参考。而裁判就是
指的是哪个，嗯，那么是哪个
我正在应用的个人习惯
手势处理。所以为了做到这一点，我
实际上需要列出一份清单
我要用不同的卡片
存储在使用引用中。所以我们是
将会使用 React 的核心组件之一
名为用户引用钩子的钩子。是
准备列出元素清单
制作可滑动的参考列表。所以，
可滑动的参考文献。我们将设置
这等于呃使用
参考资料在这个引用中，我们需要传递一个
输入它。我们将对其进行初始化。
仅仅作为一个空物体，但我们可以把它变成
它实际上变成了以下类型。
这将是一个键值对。这
键将具有字符串类型，
该值将是以下类型
可滑动。然后，我们将要制作
如果存在任何情况，则此值可能为空。
问题。我确实需要把它包起来。
用花括号括起来，因为
这是一个物体。然后是关于可滑动参考文献的，
我们实际上想用它来分配
每个个体都有自己的习惯。
参考资料那么，我该如何做到这一点呢？
这个参考属性允许我
放置一个回调函数，该函数将
允许我设置当前值
这个可滑动的参考文献列表
必须有个人电流
属性有一个键，该键是 ID。
这个习惯。所以我会说习惯就是身份认同。
该值将作为参考值
我可以从这个元素中获取它
这里。所以我会把它设为等于 ref。然后
我需要把一个密钥传递给这个……
可滑动。这就是我们没通过的原因。
关键在于表面，因为呃，我们
我们最终会把它交给……
可滑动组件，也就是呃
这是它的父级。实际上我们把它传给了
这边的景色真美。那是在我们放置之前的事。
表面。所以我要删除
那。我打算把它放在这里。嗯
实际上，这必须在这个范围之外。
这里需要执行功能。我没意识到我们
我们在函数内部进行了这项操作。
然后，在此之下，我们实际上必须……
我们将放入以下内容
特性。我们将放置一个
左过冲等于 false。所以
我们实际上并没有检测到，就像我们没有检测到一样。
希望滑动操作非常灵敏。
我们希望它和……一样重要
用户实际上是在滑动屏幕。如果我们
向左或向右过度冲刺，哪个会这样？
我们也需要这样做，这实际上会……
增加或减少摩擦力
用户正在滑动屏幕，它可能
导致他们意外滑动
事件，呃，这可能不是什么事。
他们想做的事。我们希望它是
你只需滑动屏幕，然后确保
你正在滑动屏幕，呃，然后删除
或者完成一项任务。然后我们想要
渲染方式，比如卡片的渲染方式
当用户滑动时，看起来会像这样
向左或向右。所以我们可以
实际上改变它的样式，
渲染组件或视图
取决于他们是哪一方
滑动。所以我们这样做的方式是：
过来这边，我们可以过来看看渲染图。
左侧操作，我们可以传递渲染
正确的行动。然后我们创建函数
这将使这些视图看起来像这样。
当用户……时，界面看起来会是这样的
从左侧和从右侧滑动
正确的。所以我要创建一个渲染图。
对此，我采取了剩余的行动。患病的
直接复制粘贴到这里就行了。和
我也会这样做。然后向上
在这里，我们希望实现这些功能，并且
打造专属风格。所以我们会粘贴
渲染右侧
行动起来，我也会做同样的事情，但是
左侧动作。现在我明白了
这个库有点让人困惑，而且
不必太担心。它是
仅适用于特定用途。你可能
以后都不会再用了。呃，但是对于这个
使用场景：我们必须这样做。现在是
我们采用这种样式是为了执行写入操作。
我其实打算把它删掉。
并把它放在括号里，因为
我们要返回一些 JSX 代码，对吧？
我们将返回一个视图，该视图位于……内部
它将会有一个图标。图标
我们想要使用的是一个物质共同体
图标将显示为勾号。
所以这个图标的名称将是……
一个勾形圆圈轮廓。我们将要
设定它的大小
32. 我们还要给它涂上颜色。以及
我们将把它变成#
fff。现在我们还要添加一些样式。
以后再说。但现在，我们只能……
复制这段文字，我们会把它贴在这里。
而这一次，我们没有使用……
检查一下，我们实际上要制作
垃圾桶轮廓，因为滑动它
向左滑动即可删除一个习惯。
这样就完成了，对吧？所以那些
图标很有意义。所以你可以看到
现在如果我滑动它，图标就会出现。
左边是垃圾桶，
检查图标会出现在右侧。
标记。我把它涂成白色的原因是
只是因为我们打算……
他们的背景可能不同。
颜色。所以，就这边的景色而言，我们是
准备采取正确的行动，
我们将采用一种风格。而我们是
将会创造一种名为
滑动
采取正确行动。我们也会这样做。
剩下的东西
这里。呃，我们应该只需要……
将其改为
左边。我们会下来，然后我们会
就做这两个。那么，让我们来做一个
滑动
左或行动
左边。让我们复制这个并制作
一个给
正确的。完美的。现在，对于左边的……
这就是我们要去的那个……呃……
应该有垃圾桶。所以，我们想要
首先只需设置内容样式即可。
所以，是盛放它的容器。我们将要
将事物合理化到中心位置。所以
垃圾桶现在位于中间。然后我们
想要对齐
可灵活调整的项目
最后，我们希望它的灵活性是
一。原因在于……
当你滑动屏幕时，你希望它能移动。
一路走来，如果你不这样做的话
那么它实际上不会让你……呃
完全滑动。现在它卡住了
这一点，但当我们完成添加后
风格你会看到我最终呈现的效果。
喜欢。现在我要添加背景
颜色，并将其涂成白色或绿色。不，
其实这是垃圾桶。那么，我们开始吧
把它变成红色。我还有这个红色
这里的颜色是 4C。
AF 50。不，抱歉。这实际上是
绿色代表这个颜色。我甚至
复制并粘贴到这里。呃，为了核对账单
马克，抱歉。至于红色的那个，就是垃圾。
可以，我们将要制作
E53
935. 而且它还会有点酷
红色。接下来，我们想……
放一个
边框半径为 18。我们想放置
最低保证金也达到了 18。边际
顶部两层，右侧有衬垫
16. 这就是它最终的样子
喜欢。然后我们可以向后向上滑动。
所以看起来有点像，嗯，有点像
挺不错的。嗯，现在让我们复制所有内容。
这。嗯，我就保留这个颜色吧。
相同的。我们将放置完全相同的东西
这是右翼的策略，但这次是
看起来像这样。而这一次，它
看起来像这样。当时，呃，我是
不小心把样式设置错了
垃圾桶在另一边。所以，我们
其实我想把这个放在开头，
不在柔性端。所以，我们会加入弹性元素。
开始，然后它就会出现在这里。但是……
对勾会在最后。
这意味着实际上我们并没有
想加个衬垫，我们想
左边留出一些边距。
你现在看到垃圾桶和
对勾图标看起来很不错。伟大的。
但现在什么都没发生，对吧？没有什么
当我滑动屏幕时，这种情况就会发生。我们不是
正在删除，我们无法完成。所以，
我们究竟该如何完成
戒掉一个习惯？现在，我们开始吧。
用删除键，因为这最简单。
一。删除操作。我想做什么
我想创建这个函数
接下来我要做的就是这个。
在渲染右侧函数上方，该函数是
将会被称为处理删除习惯
这将是一个异步函数
那将要调用 apprite 和
实际上，我们要彻底戒掉这个习惯。
数据库。现在来说说我们这边的造型，
在我们这边的滑动页面上，我要……
在可滑动打开时运行此属性。
每次你……时，这段代码都会运行。
向左或向右滑动以选择方向
正确的。现在，我们知道哪个方向？
嗯，你可以直接从这里得到。
嗯，争论。它为你指明方向。
这边。所以我们可以通过说来检测它。
如果方向等于
然后离开，接着做某事，在我们的例子中，就是做某事。
这被称为处理删除习惯。但是如果
那时我们就不会创造了
稍后会添加一个用于句柄的函数
完全养成习惯。但我们先从……开始
这个。还有，当我们删除一个
我们需要知道自己养成了哪种习惯。
正在删除。所以在这个句柄删除中
我们需要通过函数获取该函数的 ID。
习惯。所以这里我们需要传递那个
通过说习惯做身份来识别身份。完美的。现在
让我们回到这里，删除一个 a
您可以运行集合中的文档
尝试
抓住。我们在这里添加一个错误。而当
我们尝试一下，我们将等待
数据库，我们将称之为
删除文档功能。与此类似
其他操作，我们需要具体说明。
数据库ID，习惯收集ID
我们需要指定ID
习惯或我们正在使用的文档的 ID
试图删除，我们可以直接获取
从此ID
功能。完美的。现在，如果有的话
说实话，错误，呃，这不是一个
核心功能，所以我不需要
什么都展示一下。所以，我这就……
安慰
实际错误
信息。实际上，我直接在控制台输出日志吧。
错误。完美的。现在，我们来尝试一下
看看这样行不行。我们删除
锻炼。我不喜欢这个。
我向右滑动。你看到了，
现在不小心把一个老家伙叫了过来
朋友的习惯被选中了。
因为我们实际上有这样的习惯
之前已被删除。它不是
我已经不在这里了。我们到处都找不到。
我们成功戒掉了这个习惯。
但当我们滑动屏幕时，原因在于……
给老朋友打电话，其中一个就是那个人。
那东西被完全偷走了。
因为呃，如果你还记得的话，我们有这个
正确的重复次数列表，这就是……
检测我们正在尝试养成的习惯
删除。呃，当我们删除第四个呃
这边的习惯，呃，这意味着……
那个 um ref 的 ID 已从……中移除
列在清单里，但我们实际上并没有修改它。
既然这是第四个元素，那么现在
因为前一个是
已删除，这就是那个
滑动一下，你懂我的意思吧？
就是它，它刚刚切换了。所以我们实际上
还得告诉名单上的人，呃，它是
已更新。那么我们该如何做到这一点呢？嗯
这里可以滑动打开。
无论哪个方向，我们都会前往。
呼叫可滑动裁判，我们
暂且称之为当前状态。我们将得到
当前习惯 ID。所以要得到
当前可滑动元素，我们可以
实际上强行将其关闭，以便
最后一个元素还没有打开
我们尽力了。所以我们来删除这边的一个。
我要把100个俯卧撑的计划删掉。
你看，它会自动恢复原状。
它关闭后实际上删除了所有内容。
物品。完美的。现在我们开始处理
另一种行动能力是
养成一个习惯。现在要做到这一点，我们
实际上，我想跟踪所有
已完成的习惯。现在我来做
实际上，这是通过创建一个新的
已收集到我们的栖息地习性数据库中。所以
我打算创建一个收藏集，而且我是
我姑且称之为习惯吧。
完成。现在，我们之所以……的原因是
创建这个就是因为它将会是
对我们来说，保留这样一件具体的事情至关重要。
这条赛道将会非常长。
这样我们就能更容易地获取这些数据了。
每当我们需要的时候。所以这张表或
这个系列看起来会非常
简单的。它将有三个
属性。第一个将是
用于引用哪个习惯的习惯 ID
我们正在努力完成。我们会把
尺寸再次达到一千或
某物。我们将使其成为强制性要求。这
第二个属性将再次是
字符串，但这个将会
参考哪个用户完成了此操作
习惯。所以我们要输入一个用户ID
尺寸为 a,000，且为必填项。
现在我们最后需要知道的是……
就在我养成这个习惯的时候。所以
我们将把“已完成”标记放在……
房产大小为 th00and，而且是
也是必需的。现在，这就是我们所需要的一切。
了解。现在我们需要跟踪……
习惯完成 ID。所以我们要走了
复制此收藏集 ID。我们要走了
回到我们的餐桌旁。而在这里，
我们要去呃……
文件。实际上，我们需要把它放进去
首先是我们的env文件。所以，我其实是
就放这儿吧。准备复制
这。我打算把这个改成习惯。
呃，完成。实际上，我们不妨称之为
它
完成。所以，完成情况
收藏。我们要粘贴
这个ID在这里。然后我们去我们的
apprite f uh 文件，然后我们导出它
ID。所以我要复制这个。前往
称之为
完成集合 ID。然后……
我们将这个改成
完成
出色地。完美的。现在让我们进入我们的……
index.tsx。在这里，我们想要
创建一个函数，该函数将……
类似于删除操作的习惯，但是
还会再多一点。
错综复杂。所以，我们就叫它
把手
完全养成习惯。而且它还将
接受身份证件，但不是删除……
文档，我们要创建一个文档。
我们想真正养成这个习惯。
添加到已完成习惯列表中。所以，
我们将更改此集合 ID
改为完成集合 ID。
我们确实需要在这里传递一个ID，但是
这不是我们所习惯的本质。
完成这件事，因为那将会发生
在我们实际的有效载荷中
正在发送。这个ID就只是
是我们为此生成的 ID
桌子。所以，我们要说的是ID点
独特的。然后在这里我想通过
习惯识别码，这将等同于
我们从……那里获得的ID
功能。然后是一个用户ID，它必须是
等于用户 ID，但我们必须
嗯，我们先断言用户存在。
第一的。咱们还是过来吧。
如果不是用户，则返回。所以
我们跳过这一步，现在我们就不必这么做了。
先打个问号，然后我们……
通过已完成的。以及已完成的
此刻就是现在。
正确的？因为这个函数将会
当用户完成以下操作时调用：
行动。所以，呃，这将是一个新的
将日期转换为字符串。完美的。现在当你
当用户完成一个习惯时，我们
不希望它只是插入新的
习惯的养成。那是
这只是我们想要的东西之一。
待办事项。另一件事是我们实际上
想要更新习惯表，因为
如果你还记得的话，这张桌子有几个
重要的属性。为了
例如，街道数量应该
增加，最后完成的应该
改变，是的，我认为只有这两个。
说实话，没错，就是街头计数。
应该增加，以便我们知道
用户现在额外完成了一天的工作。
最后完成的那个人会告诉我们是否
用户完成了“嗯”这个习惯
现代。所以接下来我们要做的就是……
呃，请在这里等候，我们想抓住……
我需要养成的特定习惯
真正走出困境。所以，我们在这里
我们想要抓住这个特定的习惯。
想增加连胜纪录。所以我们是
假设常量习惯等于
习惯。找到，我们就能找到。
习惯，其 h 等于习惯
将 ID 设置为该函数的 ID。
所以我们只是找到了我们一直以来的习惯。
正在尝试完成。那么，如果对于某些
当时我们没发现任何习惯的原因
我们返回后继续前进。
实际上什么也没做。但是如果我们
如果您有某种习惯，那么我们想打电话
等待
数据库.更新文档。而在这方面
更新文档，我们希望通过
数据库 ID 和习惯收集 ID
因为我们正在更新习惯
收藏。我们想具体说明是哪一方面。
我们需要更新的文件。所以在
你传递的更新函数显然
你每次都要传递的这两样东西
函数，但你必须传递 id。
您要更新的文档的 h
在我们的例子中，它只是ID。
我们在这里提出的论点是
这个函数，然后你必须传递它。
有效载荷，而这个有效载荷正要……
你是这份文件的哪一部分？
想要更新你传递的任何有效载荷
这里你传递的任何字段都将是
已更新，现在只保留我们想要的两个字段
需要更新的是连胜/连败次数，我们
想让它等于我们将要……
基本上就是加一。所以我们会这样做。
之所以有其当前价值，是因为我们只是
目前就是从这里养成的习惯。
正确的？所以我们可以直接说连胜/连败次数。
现在将进行习惯点条纹计数，但
加一。所以我们只需将其加一。
现在我们要更新的第二件事
是最后一个完成的。我们想设定它
等于当前日期。所以我走了
表示新的
日期等于 ISO 字符串。完美的。现在我
刚刚也意识到，呃，我们当时……
我们肯定想使用
两人日期相同。所以，我
我想做的就是真正得到
当前日期并将其设置为等于此值
然后重复使用两次，这样我们就不会
两者之间是否存在任何不匹配之处
日期。完美的。现在，如果有一个
出错了，我们就把它记录到控制台。
没关系。那么，我们来看看这是否可行。
我打算在……的时候称之为
方向是对的。所以，我们要走了
表示如果方向等于
写完之后，我们就要打电话了。
彻底养成习惯，我们将……
把做身份证的习惯传下去。完美的。现在，
我们来尝试养成一个习惯。我们来试试
完成给老朋友的电话
一。所以我打算从右往左放
并显示当前用户不是 per
已获授权执行所请求的任务
行动。原因在于：
因为我们刚刚推出了一系列新品。
这种习惯的完成，但我们没有。
为该系列设置策略
呃，这样一来，它就不允许任何用户了。
可以对它做任何事。所以在
这边需要添加权限，我们需要添加一个
角色取决于我们希望允许用户做什么
如何处理这批藏品？我只是
将会把所有用户都放进去，所有用户都可以
创建呃阅读。其实，我正要走。
之所以说“创造”，是因为我认为这就是……
这是我们目前唯一要做的事情。所以
我要点击更新，现在用户
能够创造。那么我们来试试吧
再次。对，完美。成功了。不是
只是我们在这里注意到，嗯，这一天
连胜纪录更新了一次，因为我们刚刚
更新了，对吧，而且
如果我回到这里，嗯，然后我去
我们从文件中可以看到这种习惯
完成情况 u 也新增了一个条目。
完美，现在我想要能够获取
已完成的习惯清单
今天。原因在于……
因为有两个原因。首先
所有这些都将使我能够阻止……
阻止用户执行此操作及所有操作
突然间，他们完成了同样的……
同一天两次重复同样的习惯。
他们会一直这样下去，永无止境。
但也因为我想要一个
当一种习惯出现时，特殊的造型是
今天完成了。所以为了做到这一点，我想……
实际上，需要在某个地方创建一个函数。
这里的情况与此类似：
获取习惯功能，但它将会
获取已完成的习惯或
完成了，嗯，是的，完成了习惯
但就今天而言。所以我要把这个叫做
今天领取
完成。现在这将是一个
略有不同。我想做什么
我想知道今天意味着什么。所以
我们如何只获取那些已完成的答案？
是今天的吗？为了做到这一点，我……
今天要说的常量等于新
日期。然后我要设定工作时间
今天设定时间为0:00:00。
然后，当我们获取列表时
这里查询中的文档，
顺便说一句，这不会是为了
习惯收集。这将是为
完成作品集。嗯，在
这里有个查询，我们想保留这个
相同。我们只想查询
完成于当前
用户。但是我们可以添加另一个查询
这是因为这是一个查询列表。
正确的？第二个查询将要进行。
或许我们只想复制或获取
当前发生的完成
天。所以查询
大于或等于，然后
我们将把已完成的属性放在
到
大于或等于今天做两个
iso字符串。所以这样做会是……
将获得所有来自
首先是完成收藏
这是由已登录用户完成的。
所以我们无法从中获得完成信息。
其他用户因此不会造成任何影响
感觉，但也包括发生在……的那些事
至少在今天早上之后，这将只会
获取今天完成的数据。它
显然不会从未来得到任何东西。
因为除非你手动编辑
你永远不应该拥有的数据库
来自未来的完成，对吗？所以
仅限今天使用。当我们得到
这个背面，我们可以通过说“con”来抓住它。
完成次数等于
响应点实际上我们可以直接设置它
这和我们之前的做法完全一样
习惯。呃，我们要开始设置了
必须为……建立一个州
这。我要来这里，我是
暂且称之为
已完成的习惯状态和一套
已养成的习惯。现在是这种类型
情况会有些不同。是
我打算在这里创建一个新类型。我们开始吧
导出
名为“习惯”的界面
完成。它将再次延长
模型
文档。而我希望它成为……
它将拥有一个习惯ID，即
等于一个字符串，即用户 ID
等于一个字符串，它将有
完成时等于
字符串也是如此。现在在这里我们可以
使用这种习惯完成类型和
它还会列出一份清单。
现在，让我们运用这个既定的习惯。
这里完成的是而不是
习惯的养成，就是反应的形成。
将文档作为习惯完成清单。
完美的。说实话，如果我
仔细想想，当我们想要
检测今天是否完成了某个习惯，
对我们来说，这样做或许更容易些。
将已完成的习惯状态设置为“代替”。
习惯完成型
它只是一个数组，它只是一个包含该数组元素的列表。
这种习惯的 ids 在 um 在这个
列表。所以，与其说是一个列表，不如说是一个
已养成的习惯，我们有一份清单
他们的身份信息。所以当我们想要
检测当前习惯是否
完成，我们只需检测此列表是否已完成
id 中包含当前 ID。
习惯。所以，与其重新来过，不如就此作罢。
好了，咱们开始吧。所以我们会
假设完成次数等于这个值。是
我就把它放这儿了，就这样
我们可以让它变得更容易。然后我
将会改变这些已养成的习惯
呃，这以前是一种习惯
完成类型，我打算绘制地图
我会仔细阅读并绘制每一张地图。
完成之后就只剩下它的身份了。所以我是
我要说的是习惯ID，呃，现在这个
应该是一个包含 id 的字符串列表
这种习惯堪称完美，因为
我最想阻止的事情之一
这是我们给……的津贴吗？
基本上是为了完成一个习惯
一天多次。所以要做到这一点
相反，为了防止这种情况发生，我可以过来。
完全习惯于处理和
禁止这样做，理由是如果已完成
习惯包括当前 ID。
习惯。所以，这边过来就行了。
现在我们没有获取已完成的数据。
习惯尚未养成。所以我打算……
把它叫到这里来，就像我们之前做的那样。
养成习惯。我去取。
哦，我刚刚意识到我们没有
设置此内容的读取权限。
表格也一样。我完全错过了这一点。
那么，让我们设置一个读取权限吧。
这样我们就不会出现任何错误。和
现在它应该正在获取那个信息。
信息。所以如果我尝试完成
实际上，它并没有允许我这样做。
也许它实际上并没有获取到数据。
等等，让我补充一下。
保存，然后取消注释并保存。
它。我们再试一次。
是啊，现在不行了。那是
只是，嗯，我们做了，因为我们，我们没有
实际上我们遇到了一个错误。所以我们没有
实际上需要再次获取完成信息。所以
你知道这意味着什么，对吧？它
这意味着我们实际上并没有得到
关于完工的信息
即时的。所以和我们做的很相似。
在这里，我们希望养成一些习惯。
订阅此新呃完成
桌子。现在我们要做的就是……
打算再创建一个
订阅，但这个要开始了
成为最终订阅。所以
我打算把这个叫做“实际上你知道的”。
这个频道。我们将要
称之为
习惯频道。所以我们知道这是
只是习惯的渠道
订阅。我们要复制
整个逻辑，我们将要……
再把它粘贴到这里。但我们
打算把这个变成……
完成
渠道。所以我们正在订阅
检测任何变化的通道
完成情况表。所以在收藏品中
这里是ID，我们需要把它改成……
完成集合 ID。这将
也将其更改为
完成
订阅后，我会把订阅转给订阅者。
改为完成频道。现在，一个
同样重要的是……
完成情况表，对吧？我们不
想听听创作的……
更新或删除。那些不是
实际的事情，呃，我们实际上是
在那张桌子上制作。我们只是
完成。嗯，所以，我们只有
准备收听一个创建事件。和
当这种情况发生时，我们希望获取
今天又完成了一些项目。所以，我们将
再获取一次结果。和
最后，我们想要返回
此应用的取消订阅功能
订阅。所以我们还是回去吧。
调用完成订阅
再次。完美的。现在我们来试试看。
这里发生了什么？那么，让我来试试看
完成这个步骤后，我们应该就能看到结果了。
这一比例上升了。现在也应该如此了。
获取了今天的完成情况。但有一个
重要的是，如果我现在尝试
再次这样做，实际上并不会……
请允许我这样做，因为它检测到了这一点。
今天我们完成了这个习惯。所以它
不会允许我们耍这个花招。
更多时间。所以现在我们还有另一种方法
实际上可以分离已完成的
从未完成的习惯中养成习惯是我们
实际上可以利用这些信息来
让用户界面看起来有点
如果这种习惯已经养成，情况就不同了。
当天完成。所以，我们要……
实际上在这里创建一个状态
某处。它不会成为一个州
实际上。这将会是一个
布尔值被调用表示习惯已完成。和
这将是一个函数，
返回真或假的陈述
习惯是否取决于其身份识别
是否已完成。所以，我们要……
将其转换为一个需要
习惯 ID，它是一个字符串。对我们来说
我们想知道这个习惯是否已经养成。
只需要办理入住手续即可
如果包含已完成的习惯数组，则包含
该习惯的ID。所以如果真是这样的话，
然后，我们正在传承的习惯
该函数的参数是
已完成，应该返回 true。
否则，它就会变成假的。我们
在我们的用户界面中使用它。所以，我
我真正想做的是创造
这个卡片的用户界面版本
称为卡片完成界面。是
我们将前往我们所处的表面。
这边。而且在风格上，而不是
传递一种风格，即风格
对于卡片，我们希望传递一个数组
的
风格。所以，实际上，我们就保留它吧。
同样，但我们将通过一个
这里有一个数组。所以，我打算这么做。
这。我们将通过两个
具体风格。第一个是
styles.card，即默认样式。
但如果养成的习惯是真的，而且
我们这样做是为了弄清楚，因为我们说是
习惯已完成，我们将习惯 ID 传递给该习惯。
这里。如果真是这样，那么我们也想要
将一种新样式传递到此数组中，
我们将它称为卡片。
嗯，完成了风格。现在我们没有了
还没有。所以，我们要去这里
样式和卡片旁边，我要去
创建一张卡片
完全的。现在，你会看到，如果基于
在此，我只是制作了背景。
这张卡片最终可能是红色的。
我把它涂成红色就行了。你看，
今天完成的习惯有：
现在被正确地区分了
在那些尚未……之间
今天完成了。顺便说一句，我是
用多个设备录制这段视频
遥远的日子。所以，呃，这就是原因
我今天还没完成这项工作。
新的一天已经开始了。所以，我有
所以，我们能够正确检测出它是否是……
又一天。这就是原因。所以，你们
不要把这两者混淆。所以，你
现在我们已经正确检测到了
那。那么，我们想要什么样的风格？
养成并执行已有的习惯
完全的？嗯，我真正想要的就是
我只是想让它稍微……
不太显眼。我要设置
不透明度为 60%。你会发现……
现在很明显，那些
那些显示为灰色的部分是……
完全的。现在，我们可以做的一件事是……
嗯，我们仍然想要……
允许滑动操作，右，当
事情已经完成了。现在，
显然，完成的那个并不是呃
打算一天之内增加这个量
连胜，但我们希望允许用户
如果需要的话，能够删除一个习惯
案件。现在，我想做的是……
当用户尝试完成一个习惯时
他们已经完成了，我想要
要替换的勾号
短信内容大概是“已完成”之类的。
就是这样。哦，我不小心
改掉了那个习惯。是的，所以我们是
我要去那边那个地方，
渲染写入操作。而在这方面
函数方面，我们实际上要进行一些更改。
它的论点是需要一个
习惯 ID，它将是一个字符串。
现在正因为如此，当我们称之为……
我们需要将此函数更改为
返回一个匿名函数，该函数
习惯性地通过
ID。现在在渲染写入函数中
我们想在这里核实一下。
如果
习惯是这样做的，如果这是习惯
完成是真的，我们把这种习惯传承下去。
这里输入ID，然后我们实际上想显示
一条短信会说
完全的。否则，我们就想展示
对勾。你现在就会明白了。
完成后，它会说
完全的。而当它不是时，它就会
打勾。现在，很明显，这一点
我们需要给它定个风格。嗯，我也
说实话，我可以快速略过这里。
风格。因为它只是一个
小巧的款式，我只需要涂上颜色即可。
我会让它变成一样的，因为
这也是我们在这里所做的。
打勾只是为了避免这种情况。
为此创建一个额外的样式。你呢
你看，现在看起来好多了。
完美的。现在我们终于完成了
本页。我们现在想要创建
我们看到的最后一个屏幕是
条纹屏幕。我们有添加的习惯，
今天的习惯，现在让我们开始吧
条纹屏幕。那么我要结束了。
这。我们将在这里打开
条纹成分。现在在这个页面上
我想做的是，我首先想得到
关于习惯的数据以及
完成，因为我们想做的
我们想实际使用这个
利用这些数据对不同的习惯进行排名。
那些已经完成的项目只是为了展示
用户正在完成哪些习惯
更频繁，也不频繁。所以我们该怎么做？
这里也需要这些数据。
现在我们要采取的方法是：
我们将前往 index.tsx tsx 和
我们将把这个逻辑复制过来。
这里。所以，我们要复制这个
逻辑。我们要把它粘贴到这里。
我们将复制使用效果。但
要做到这一点，需要很多东西。
我们还得复制。我们必须
复制这些函数，对吧？
获取习惯和迄今为止的获取情况
完成。我们将复制这两份文件。
它们，我们要粘贴粘贴
就在这里。而且，我们还要
需要复制各州的情况。所以，我们要走了
模仿习惯和完成
各州，我们也要把它放进去。
这边。现在，这不仅仅是复制和
粘贴。我们得做一些
对它们进行更改。首先，我们来……
从 React 导入一些内容。所以，
例如使用状态和使用效果
钩。现在，我们希望习惯数组
列出一些习惯。所以我们必须
导入此类型。但已完成
习惯，呃，我们不想把它列成清单。
就像我们以前那样，用弦连接着彼此。前
我们只是在获取一个包含以下 ID 的列表：
已完成的习惯。反而
现在我们想获取它的全部数据。
所以我打算把它变成……
完成习惯类型。现在要得到
用户，我们将说 const user 是
相当于像我们那样使用 o
前。现在完美了。然后我们需要
收集不同类型的产品。但问题是
我们不需要这个逻辑。
在此屏幕上订阅。以及
原因在于这个屏幕
这无关紧要，因为我们不是
在连胜屏幕上进行互动。是
不做任何更改数据的操作
是指习惯还是完成的事情，对吧？
我们不会删除习惯或完成
连胜记录屏幕上的习惯。那只是
显示数据。所以我们想删除
这里面全是逻辑。出色地
也把这个删掉。我们正要……
获取习惯和完成情况
使用效果。所以我会把这个删掉。
这里。我们不需要归还或清洁。
取消所有订阅。而我们……
实际上，我不会只获取今天的
完成。我们想要获取所有
完成。所以我打算改变……
要获取的函数的名称
完成。并且关于函数
这里我们需要改个名字。和
我们需要稍微修改一下这个查询。
因为这只是在获取信息，呃
习惯是为特定目的而养成的。
今天的用户，对吧？在某一天
或时间范围。现在，我们不需要这个了。
不再是了。所以，我要删除这条信息。
我想导入所有应用程序
东西。所以，我要导入数据库。患病的
导入数据库 ID 和完成 ID
也请查询。但是，并没有获取
当完成时间大于
如果与今天的情况相同，我们将删除它。
我们只需完成所有工作即可
用户习惯，无论哪一天
它们于……竣工。最后，
我想把已完成的习惯设置为
等于完成情况，而不是列表
已完成完成 ID。呃
我们将把所有完成数据都放上来。
就在这里。完美的。现在，对于
习惯，嗯，我觉得这应该挺好的。
很可能相同。我们不需要
改变任何事情。我们只需要导入
习惯收集 ID，我们应该
准备就绪。现在，这些技巧……
屏幕，我们有了习惯，而且
已完成的习惯数组，以及这些是
已填写正确数据。现在怎么办？
我们从哪里开始？好，我们开始吧。
首先从我们想要的数据开始
屏幕上会显示不同的内容
已完成的习惯。所以我们是
屏幕将分为两部分。
如果你还记得演示中的内容的话，
我们将把顶部放在这里，
这将显示排名
完成次数最多的习惯。在
底部，我们也会逐一展示。
个人习惯和目前的连胜纪录
为此。那么，我们就从底部开始吧。
首先，因为这会对我们有所帮助。
为我们制作时所需的一切做好准备
上半部分。所以，为了做到这一点，我要去
首先，把这句话改成“习惯”。
连胜。标题只要好听就行。
然后是下面
我想对这些习惯进行排名。所以我是
将在顶部创建一个函数。
这里。实际上，我们就把它放在下面吧。
获取完成信息的相关内容。而我是
我将创建一个名为 get 的函数。
连胜数据。这个函数要做什么？
要做到这一点，就需要进行习惯识别。
对于每一种习惯，它都将是
恢复该习惯的连续使用记录。
养成这个习惯的最佳记录，以及
我们为这个习惯投入的总金额
也一样。所以为了做到这一点，我们需要
既包括习惯本身的数据，也包括
也包括你完成的所有次数
这个习惯。所以我们知道什么是……
你参与的最大序列
养成这个习惯。呃，所以我们检测到
最佳连胜纪录和当前连胜纪录。
所以，我们首先需要做的就是……
需要获取所有已完成的项目
此习惯按日期排序。所以，我们
有习惯完成或呃我们
包含补全数组。所以我走了
调用创建一个名为“此处创建数组”的方法
习惯完成情况，我们将设定
它等于已完成的习惯点过滤器。
我们将按每种习惯进行筛选。
具有与此习惯 ID 相同的 ID。所以，我们
只保留具有此 ID 的习惯
因为记住完成情况
数组将包含每一个
从未完成过的习惯。而且由于
我们希望这个函数返回数据
对于每一种习惯，我们首先需要明确说明。
我们指的是哪种习惯？所以我会
假设是 C，我们只想筛选当
习惯 ID 等于习惯 ID
该函数。
现在当我们筛选这个的时候
习惯完成情况仅包括此项。
习惯就在其中，然后我们就可以使用它。
JavaScript 中的排序函数
整理一下。现在我们必须具体说明我们如何
想把这件事理顺，以及我目前的做法。
我想按日期排序。
所以最简单的做法是我们有
这里有一个简单的回调函数，我们
可用于比较。你甚至可以看到
这里会显示你对比第一个
习惯，即习惯A与第二个习惯
习惯，也就是习惯B。所以我们要去
抓住 A 和 B。而我们现在的方式是
比较它们是基于以下几点：
习惯养成日期上的差异
A 和习惯 B 都已完成。所以
我们会公布新的日期，然后就此作罢。
完成的 A 点获取值
时间减去，然后我们再输入相同的内容。
但对于B来说，情况有所不同。而这种差异是
我们根据什么对数组进行排序？现在我们
列出已分类的具体习惯
在他们所处的时代
完全的。现在我们需要检查一下。
如果此数组为空，因为如果
习惯
完成长度等于
如果为零，那么我们只想返回
基本上是这种默认状态
目的。所以接下来会发生什么呢？
我们来制作这个物体吧
这里将采用简洁的界面。
称为
连胜数据及其未来走向
返回结果就是它将返回一个连胜纪录
那将是一个
最佳连胜纪录仍在继续
是一个数字，也是一个总数，这又
将会是一个数字。所以当我们
返回我们想要使用的这个
接口，以及当我们有一个空的接口时
我们基本上想要返回的状态
连胜纪录为零是最佳连胜纪录
也为零，总数也为零。
出色地。现在，我们可以假设以下情况：
习惯的完成并非空无一物，而且
我们已经得到了排序后的数组。现在我们该怎么办？
如何处理它？嗯，我们建立连胜纪录
数据在最后。我们想返回呃
基本上就是一个数组或对象，它是
看起来会像这样。它将
返回一个名为 streak 的变量，
名为最佳连胜纪录的变量，以及
名为 total 的变量。但我们没有
那些还没有的。所以，我们必须建造它们。
所以，让我们在这里写下建立连胜
数据。那么，我们就从……开始吧。
条纹。我们将在这里创建一个变量。
初始值设为零。出色地
创建一个变量来表示最佳连胜纪录。出色地
也将其设置为零。我们将制作
总共一个。现在总和显然是
习惯的长度
因为那样它就是补全数组了
我们完成这项工作的总金额
习惯。所以我们就说是习惯吧。
completions.length，这已经是
这将是总价值。现在，在
为了让我们能够生成价值
连胜和连败，我们也需要
知道用户上次访问的日期
完成了。所以，我们要说的是“让”。
最后期限。我们将设置一种类型的
它要么是日期，要么是空值，因为它将
开始
为空，我们需要计算一下。
我们还需要了解当前情况。
条纹。所以我们就说当前情况
连胜等于
零。完美的。现在轮到我们来建造它了，
我们必须反复练习这些习惯。
补全数组并检测到
信息并为每个对象积累
个人习惯。所以我们要说
习惯完成点，每个和
我们将从每个习惯中获取信息。
它通过这个完成变量来实现。现在
首先我们来确定日期。所以我们要走了
也就是说，const date 等于 new
日期。这将给我们提供日期。
已经完成了这个习惯。所以
我们将说 c 已完成。
然后我们需要检查是否存在
最后日期的值。最初是
不。但当我们回顾这些习惯时……
当我们遍历完成数组时
我们将改变这个值。所以
如果最后日期不为空。所以如果
那是一个日期，呃，那个习惯是
最后完成之后，我们想要得到
当前日期与当前日期之间的差异
这个习惯和上次约会的时间。所以
我们将说 diff 等于 um
date.get
时间减去最后日期即可得到
时间。然后我们想总结一下。
周围加了一些括号，所以我们
实际上可以将其分解成一个实际的
我们能够理解的格式。所以我们会
将其除以 a,000 * 60 * 60 分钟或
时间24小时。现在，原因就在于此。
仍然出现错误，并且显示：
属性获取时间不存在
类型永远不会是因为我们喜欢
即使我们假设我们正在断言
这里最后一个日期不为空。呃
TypeScript 知道我们永远不会设置 last
每天对任何事情都进行正确的设置，我们将其设为 null
一开始设置过，但我们之后再也没有设置过。
稍后，我们将在这个函数中继续
将其设置为某个值。所以这个错误
会消失的。所以暂时先忽略它吧。
现在我们有了时间差。
我们想检查一下是否
差值小于或等于 1.5
因为如果是这样，那么我们就想要
连胜次数增加一次。所以我们会说
当前连胜场数加一或等于一。现在
如果不是，我们只是想保持最新状态。
连胜纪录等于一。我们想要
将其初始化为1。现在，如果没有
最后一次约会，对吧，这就是我们现在的情况。
实际上要为最后一个值设置一个值。
日期。我们首先想确认一下：
目前的连胜纪录大于
如果这是最佳连胜纪录，那么我们
想更改最佳连胜纪录的值
并将其设置为等于当前值
条纹。现在，我们更新了这个值。一个
更简便的方法也可以使用
数学中的最小值或最大值函数
这是一个你可以在其中访问的图书馆
JavaScript，但我认为这种方式也行。
直觉的。如果情况并非如此呢？
然后我们希望将连胜纪录设置为等于
目前的连胜纪录，我们还会设定
最后日期等于日期和
你会发现，现在最后一个日期已经不是了。
为空，我们可以访问获取时间和
如果这一切最终都成功了