React Native Toast 使用教程

React Native Toast 使用教程

react-native-toastA android like toast for android and ios, android use native toast, ios use UIView+Toast项目地址:https://gitcode.com/gh_mirrors/re/react-native-toast

项目介绍

React Native Toast 是一个用于在 React Native 应用中显示 toast 消息的库。它基于 react-hot-toast 构建，并针对移动设备进行了优化。该库支持多种功能，如多重 toast、键盘处理、滑动删除、位置自定义以及对 JavaScript 承诺的支持。它适用于 iOS、Android 和 Web 平台。

项目快速启动

安装

首先，通过 npm 或 yarn 安装 react-native-toast：

yarn add @backpackapp-io/react-native-toast
# 或者
npm i @backpackapp-io/react-native-toast

配置依赖

确保安装并链接以下依赖：

yarn add react-native-reanimated react-native-safe-area-context react-native-gesture-handler

使用示例

在你的应用入口文件中，使用 <GestureHandlerRootView /> 和 <SafeAreaProvider /> 包裹你的应用，并在根组件中添加 <Toasts /> 组件：

import React, { useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { toast, Toasts } from '@backpackapp-io/react-native-toast';

export default function App() {
  useEffect(() => {
    toast('Hello');
  }, []);

  return (
    <SafeAreaProvider>
      <GestureHandlerRootView style={styles.container}>
        <Toasts />
        <Text>Hello, World!</Text>
      </GestureHandlerRootView>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

应用案例和最佳实践

多重 Toast

你可以同时显示多个 toast，并自定义它们的位置和样式：

toast('Top Toast', { position: 'top' });
toast('Bottom Toast', { position: 'bottom' });

承诺支持

使用承诺来自动更新 toast 消息：

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Success!'), 2000);
});

toast.promise(myPromise, {
  loading: 'Loading...',
  success: 'Got the data',
  error: 'Error when fetching',
});

典型生态项目

React Native Toast 可以与许多其他 React Native 库和工具一起使用，例如：

• React Navigation: 用于导航和路由。
• Redux: 用于状态管理。
• React Native Gesture Handler: 用于手势处理。
• React Native Reanimated: 用于高性能的动画和交互。

这些工具和库可以与 React Native Toast 结合使用，以创建一个功能丰富且用户友好的移动应用。

react-native-toastA android like toast for android and ios, android use native toast, ios use UIView+Toast项目地址:https://gitcode.com/gh_mirrors/re/react-native-toast