Sonner-Native 安装与配置指南

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 组件的一个移植版本。Toast 组件通常用于显示简短的通知消息，不会打断用户的操作流程。Sonner-Native 提供了多种样式和功能，比如成功、错误、警告等不同类型的通知，以及自定义图标、可交互按钮等。

本项目主要使用 TypeScript 进行开发。

2. 项目使用的关键技术和框架

• React Native：用于构建原生移动应用的 JavaScript 框架。
• Reanimated 3：React Native 的动画库，提供了高性能的动画能力。
• React Native Gesture Handler：用于处理 React Native 中的手势操作。
• React Native Safe Area Context：提供了安全区域边界的上下文，确保内容不会被操作系统界面（如刘海屏）遮挡。
• React Native SVG：用于在 React Native 中绘制 SVG 图形。

3. 项目安装和配置的准备工作及详细步骤

准备工作

在开始安装之前，请确保您的开发环境中已经安装了以下依赖：

• Node.js：建议使用最新版本的 Node.js。
• React Native CLI 或 Expo CLI：用于创建和操作 React Native 项目。
• Yarn 或 npm：JavaScript 的包管理工具。

安装步骤

1. 克隆项目

   首先，您需要克隆项目到本地：

   git clone https://github.com/gunnartorfis/sonner-native.git
   cd sonner-native
   

2. 安装依赖

   接下来，在项目目录中安装所有依赖：

   yarn install
   

   或者如果您使用 npm：

   npm install
   

3. 链接依赖

   因为 Sonner-Native 是一个 React Native 库，您需要将其链接到您的 React Native 项目中：

   react-native link sonner-native
   

   注意：如果您使用的是 Expo 项目，请使用 expo install sonner-native 命令。

4. 配置项目

   将 Sonner-Native 模块导入到您的 React Native 应用中：

   import { Toaster } from 'sonner-native';
   

   在应用的入口文件中，通常是在 App.tsx 或 App.js 中，包裹您的应用组件：

   function App() {
     return (
       <View>
         <NavigationContainer>
           ...
         </NavigationContainer>
         <Toaster />
       </View>
     );
   }
   

5. 使用 Toast 组件

   在需要显示 Toast 的组件中，导入 toast 函数并使用它：

   import { toast } from 'sonner-native';
   
   function SomeComponent() {
     return (
       <Button
         title="Show Toast"
         onPress={() => toast('Hello, World!')}
       />
     );
   }
   

以上步骤即为 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