React Native轻松实现Toast，新手必备！

2023-10-31 11:55:57

在 React Native 中使用 ToastAndroid 显示提示信息

简介

Toast 是移动应用程序中一种常见的视觉元素，它会在屏幕上短暂显示一条信息。React Native 提供了 ToastAndroid 模块，允许开发人员在 Android 设备上轻松显示 Toast 提示信息。

引入 ToastAndroid 模块

import { NativeModules } from 'react-native';
const ToastAndroid = NativeModules.ToastAndroid;

显示 Toast 提示信息

ToastAndroid.show('Hello, world!', ToastAndroid.SHORT);

Hello, world!：要显示的提示信息。
ToastAndroid.SHORT：指定 Toast 显示的时长，可以使用 ToastAndroid.LONG 来指定更长的显示时长。

自定义 Toast 样式

你可以通过 ToastAndroid.showWithGravityAndOffset 方法来自定义 Toast 的样式和位置。

ToastAndroid.showWithGravityAndOffset(
  'Hello, world!',
  ToastAndroid.SHORT,
  ToastAndroid.BOTTOM,
  25,
  50
);

ToastAndroid.BOTTOM：指定 Toast 显示的位置，可以是 ToastAndroid.TOP、ToastAndroid.CENTER、ToastAndroid.BOTTOM。
25：指定 Toast 距离屏幕底部的距离。
50：指定 Toast 距离屏幕左边的距离。

取消 Toast 提示信息

如果你想在 Toast 显示前取消它，可以使用 ToastAndroid.cancel 方法。

ToastAndroid.cancel();

完整示例

import { NativeModules } from 'react-native';
const ToastAndroid = NativeModules.ToastAndroid;

const App = () => {
  const showToast = () => {
    ToastAndroid.show('Hello, world!', ToastAndroid.SHORT);
  };

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

export default App;