显示弹出式 toast

了解如何在 Expo 项目中创建 Toast 弹出窗口。

什么是吐司

¥What is a toast

Toast 是移动开发中的标准技术，用于在不中断用户正在做的事情的情况下通知用户某件事。

¥Toasts are the standard technique in mobile development for notifying your users about something without interrupting what they are doing.

根据 Android 开发者文档：“Toast 在一个小弹出窗口中提供有关操作的简单反馈。它仅填充消息所需的空间量，并且当前活动保持可见和交互。Toast 在超时后自动消失”。

¥According to the Android Developers Documentation: "A toast provides simple feedback about an operation in a small popup. It only fills the amount of space required for the message and the current activity remains visible and interactive. Toasts automatically disappear after a timeout".

为了吐司，我们推荐两种解决方案：react-native 包中的 API 和 React Native 社区维护的库。

¥To present a toast, we recommend two solutions: an API from the react-native package and a library maintained by the React Native community.

仅限安卓：ToastAndroid

¥Android-only: ToastAndroid

Toasts 是 Android 的原生功能，但 iOS 默认没有此功能。如果你只需要 Android 上的 toasts，你可以使用 React Native 提供的 ToastAndroid API。

¥Toasts are a native feature of Android, but iOS doesn't have this by default. If you only need toasts on Android, you can use the ToastAndroid API provided by React Native.

用法

¥Usage

要使用 ToastAndroid 显示基本 toast，请从 'react-native' 包导入 ToastAndroid 并使用消息和持续时间选项调用 ToastAndroid.show：

¥To show a basic toast with ToastAndroid, import ToastAndroid from the 'react-native' package and call ToastAndroid.show with a message and duration option:

import React from 'react';
import { View, StyleSheet, ToastAndroid, Button, StatusBar } from 'react-native';

export default function App() {
  function showToast() {
    ToastAndroid.show('Request sent successfully!', ToastAndroid.SHORT);
  }

  return (
    <View style={styles.container}>
      <Button title="Show Toast" onPress={showToast} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: StatusBar.currentHeight,
    backgroundColor: '#6638f0',
    padding: 8,
  },
});

上面的代码在 Pixel 3a 上的结果如下：

¥The code above results in this on a Pixel 3a:

还有许多其他方法可以配置 Toast 位置、持续时间和重力选项。阅读 React Native ToastAndroid 文档以了解更多信息。

¥There are many other ways to configure your toast position, duration, and gravity options. Read the React Native ToastAndroid docs to learn more.

跨平台：react-native-root-toast

¥Cross-platform: react-native-root-toast

由于 iOS 没有内置的 toast 功能，React Native 开发者必须实现自己的跨平台 toast 库。react-native-root-toast 就是开发者与 React Native 社区共享的此类解决方案之一。

¥Since iOS doesn't have a built-in toast feature, React Native developers have to implement their own cross-platform toast libraries. react-native-root-toast is one such solution that the developer has shared with the React Native community.

我们推荐此解决方案，因为它是最常用和维护最多的开源库之一，无需原生代码即可在 Android 和 iOS 上运行。它还提供了许多自定义选项，这意味着你将能够将 Toast 的设计与应用的其余部分相匹配。

¥We recommend this solution because it's one of the most used and maintained open-source libraries that work on Android and iOS without the need for native code. It also provides a lot of customization options, which means that you will be able to match the design of your toasts to the rest of your app.

用法

¥Usage

要使用 react-native-root-toast，你必须使用 npm install react-native-root-toast 从 npm 执行 安装模块。

¥To use react-native-root-toast, you have to install the module from npm with npm install react-native-root-toast.

接下来，你必须使用 <RootSiblingParent> 封装应用的根组件，以允许应用的任何部分进行 Toast。

¥Next, you must wrap the root component of your app with <RootSiblingParent> to allow toasts in any part of your app.

import { RootSiblingParent } from 'react-native-root-siblings';

// in your render function
return (
  <RootSiblingParent>

{/* <- use RootSiblingParent to wrap your root component */}


    <App />
  </RootSiblingParent>
);

然后，在应用中的任何位置，你可以 import Toast from 'react-native-root-toast'; 并调用 Toast.show 和 Toast.hide 来管理屏幕上的 Toast。

¥Then, anywhere in your app, you can import Toast from 'react-native-root-toast'; and call Toast.show and Toast.hide to manage toasts on your screen.

// Add a Toast on screen.
let toast = Toast.show('Request failed to send.', {
  duration: Toast.durations.LONG,
});

// You can manually hide the Toast, or it will automatically disappear after a `duration` ms timeout.
setTimeout(function hideToast() {
  Toast.hide(toast);
}, 500);

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

¥react-native-root-toast also has a component API if you want to manage your toasts declaratively.

<Toast visible={this.state.visible}>Thanks for subscribing!</Toast>

该库为你的 自定义外观和行为 吐司提供了许多选项。请参阅包 repository 以了解更多信息。

¥This library has many options for customizing the appearance and behavior of your toast. See the package repository to learn more.