React Native Toast

什么是 Toast？

Toast 是移动开发中用于通知用户，而不会中断他们当前操作的技术。

根据 Android 开发者文档："Toast 在一个小弹出窗口中提供操作的反馈。它填充消息所需的空间，并且活动是可见和可交互的。Toast 会在等待一段时间后自动消失。"。

React Native 的 Toast Android API 在 JS 模块中公开了 Android 平台的 ToastAndroid 模块。

它提供了 (message, duration) 方法，该方法接受以下参数

• Message: 这是一个包含要显示文本的字符串
• Duration: Toast 的持续时间是
  ToastAndroid.SHORT 或 ToastAndroid.LONG。

或者，我们可以使用指定严重性的显示 (message, duration, severity) 来指定 TToast 在屏幕布局上出现的位置。可能是 ToastAndroid.TOP、ToastAndroid.BOTTOM 或 ToastAndroid.CENTER。

'showWithGravityAndOffset(message, duration, gravity, xOffset, yOffset)' 增加了指定像素偏移的能力。

命令式技巧

ToastAndroid API 是必须的，但有一种方法可以像此示例中一样公开声明性组件

方法

• show()
• staticshow(message, duration)
• showGravity()
• static show with gravity (message, duration, gravity)
• displayWithGravityAndOffset()
• static show with gravity and offset (message, duration, gravity, x-offset, y-offset)

性质

SHORT

表示屏幕上的持续时间。

LENGTH

表示屏幕的持续时间。

UP

表示屏幕的位置。

向下舍入

表示屏幕的位置。

CENTER

表示屏幕的位置。

如何显示 toast 弹出窗口？

我们有两种解决方案：一种来自 react-native 包的 API，另一种是由 React Native 社区维护的库，用于呈现 toast。

仅限 Android：ToastAndroid

Toast 是 Android 原生功能，但 iOS 默认没有。如果我们需要 Android 上的 Toast，我们可以使用 React Native 提供的 ToastAndroid API。

用途

从 'react-native' 包中导入 ToastAndroid，并使用消息和持续时间选项调用 ToastAndroid.show，以借助 ToastAndroid 显示 toast

上面的代码导致在下面的 Pixel 上

还有许多其他方法可以设置 toast 的位置、持续时间和严重性选项。

跨平台：react-native-root-toast

用途

要使用 react-native-root-toast，您应该使用 npm install react-native-root-toast 从 npm 安装该模块。

然后，我们需要使用 <RootSiblingParent> 包装应用程序的根组件，以允许应用程序中的同级组件。

然后，在应用程序中的任何位置，从 react-native-root-toast 导入 Toast，并调用 Toastshow 和 Toasthide 来管理屏幕上的 Toast。

如果您想以声明方式管理 toast，React-native-root-toast 还有一个组件 API。

一个用于 React Native 的动画 toast 消息组件

一个用于 React Native 的动画 toast 消息组件，可以命令式调用。

安装

用途

然后在应用程序中使用它

我们可以使用以下选项来满足需求。除非在调用 show 方法时指定，否则一切都是可选的。

下面的 | 表示使用显示的其中一个值。 如果只显示一个值，则它是默认值。

自定义 toast 的类型

您可以添加一个配置 prop，在应用程序的根目录渲染 Toast，如果您想添加自定义类型或覆盖现有类型。

所以像之前一样使用该库

输出详情

常见问题解答

1. 如何在 Modal 中显示 Toast？

如何跟踪引用者？

当您在应用程序的入口点（根）渲染 <Toast /> 的实例时，会创建一个引用，并执行内部跟踪。

在底层，当您以命令方式调用 TToast show() 或 Toast. disguise() 时，会使用此引用。

在模态框中显示 toast

当您有一个模态框时，事情会变得不同。 模态框组件位于 React 根视图的顶部，因此在模态框顶部显示内容的方式是在模态框内部读取它。

这意味着您需要一个新的 <Toast /> 实例在您的模态框内部渲染（除了保留现有的 <Toast /> 实例在外部，在您的应用程序的入口点）。

其他一切都像往常一样工作； 我们使用命令式 API 显示和隐藏 Toast：Toast. show() 或 Toast. disguise()。

当模态框可见时，将使用模态框中的引用； 否则，将使用外部的引用。

引用会被自动跟踪；无论哪个 <Toast /> 实例最后设置了它的引用，都将在显示/隐藏时使用。

关于 react-native-modal 或 NativeStackNavigator 的说明

当使用 react-native-modal 或具有 presentation: 'modal' 的 NativeStackNavigator 时，将应用与上述相同的要求

2. 当使用导航库时，如何渲染 Toast？

与 react-navigation 一起使用

为了使 Toast 在导航视图层次结构的顶部可见，请将其渲染为视图层次结构中的最后一个子项（与根导航组件一起）

3. 如何模拟库来进行恶作剧测试？