React Native Toast组件——Sonner Native使用教程

React Native Toast组件——Sonner Native使用教程

sonner-native An opinionated toast component for React Native. A port of @emilkowalski's sonner. 项目地址: https://gitcode.com/gh_mirrors/so/sonner-native

1. 项目介绍

Sonner Native 是一个为React Native设计的轻量级Toast组件。它是基于@emilkowalski的sonner项目的一个端口，为开发者提供了一种简单、高效的方式来显示通知信息。这个组件支持多种显示样式，包括成功、错误、警告以及自定义样式，并且具备Promise状态下的加载提示功能。此外，它还支持顶部或底部显示、标题和描述、带回调的按钮、自定义图标等特性。Sonner Native 使用Reanimated 3进行高性能动画处理，保证60FPS的流畅体验，同时支持暗模式和Expo。

2. 项目快速启动

首先，确保你已经安装了React Native的开发环境。然后，通过以下步骤来集成Sonner Native到你的项目中。

# 安装Sonner Native
npm install sonner-native

在你的应用入口文件（例如App.tsx）中，引入并使用Toaster组件：

import { Toaster } from 'sonner-native';

function App() {
  return (
    <View>
      <NavigationContainer>
        {/* ...你的应用内容... */}
      </NavigationContainer>
      <Toaster />
    </View>
  );
}

接下来，你可以在任何组件中显示一个Toast：

import { toast } from 'sonner-native';

function SomeComponent() {
  return (
    <Button
      title="显示Toast"
      onPress={() => toast('你好，世界！')}
    />
  );
}

3. 应用案例和最佳实践

在实际应用中，你可能需要根据不同的场景显示不同类型的Toast。以下是一些典型用法：

• 显示成功提示：

toast.success('操作成功！');

• 显示错误提示：

toast.error('发生错误！');

• 显示警告提示：

toast.warning('请注意！');

• 显示带有加载状态的Promise提示：

toast.promise(
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('操作完成');
    }, 2000);
  }),
  {
    loading: '处理中...',
    success: (res) => `成功: ${res}`,
    error: '处理失败',
  }
);

• 显示自定义Toast：

toast.custom(
  <View style={{ backgroundColor: 'tomato', padding: 10 }}>
    <Text>自定义内容</Text>
  </View>
);

4. 典型生态项目

Sonner Native 可以与以下典型生态项目一起使用，以增强你的应用功能：

• React Native Reanimated：用于创建流畅的动画效果。
• React Native Gesture Handler：处理复杂的手势操作。
• React Native Safe Area Context：确保内容不被设备刘海屏或底部导航栏遮挡。
• React Native SVG：在Toast中绘制矢量图标。

通过以上介绍，你应该已经对如何使用Sonner Native有了基本的了解。你可以根据自己的需求，调整其样式和行为，以适应你的应用设计。

sonner-native An opinionated toast component for React Native. A port of @emilkowalski's sonner. 项目地址: https://gitcode.com/gh_mirrors/so/sonner-native