React Native功能丰富的Toast通知库

 更新时间:2022年10月25日 15:45:50   作者:Jovie  
这篇文章主要为大家介绍了React Native功能丰富的Toast通知库使用示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

一个功能丰富的React Native吐司库,建立在react-hot-toast之上。

特点

  • 同时进行多个敬酒活动
  • 键盘处理(包括iOS和Android)。
  • 扫一扫就可以解散
  • 有位置的敬酒(顶部和底部)
  • 定制样式、尺寸、持续时间,甚至可以创建自己的组件用于敬酒。
  • 支持承诺
  • 在网络上运行

基本用途

1.安装

# Yarn
$ yarn add @backpackapp-io/react-native-toast
# NPM
$ npm i @backpackapp-io/react-native-toast

2.导入 react-native-toast

import { StyleSheet, Text } from 'react-native';
import { toast, Toasts } from '@backpackapp-io/react-native-toast';
import { useEffect } from 'react';

3.在你的应用程序中显示一个基本的吐司

export default function App() {
  useEffect(() => {
    toast('Hello World');
  }, []);
  return (
    <View style={styles.container}>
      <View>{/*The rest of your app*/}</View>
      <Toasts /> {/* <---- Add Here */}
    </View>
  );
}
// container styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

4.可用的烤面包选项

toast('Hello World', {
  duration: 4000,
  position: ToastPosition.TOP,
  icon: 'Icon Here',
  styles: {
    view: ViewStyle,
    pressable: ViewStyle,
    text: TextStyle,
    indicator: ViewStyle
  },
});

5.创建不同风格的祝酒词

// default
toast('Hello World');
// success
toast.success('Successfully created!');
// error
toast.error('This is an error!');
// custom
toast("", {
  customToast: (toast) => (
    <View>
      <Text>{toast.message}</Text>
    </View>
   )
});
// loading
toast.loading('Waiting...');

预览

The postFeature-rich Toast Notification Library For React Nativeappeared first onReactScript.

以上就是React Native功能丰富的Toast通知库的详细内容,更多关于React Native Toast通知库的资料请关注脚本之家其它相关文章!

相关文章

  • React如何使用axios请求数据并把数据渲染到组件

    React如何使用axios请求数据并把数据渲染到组件

    这篇文章主要介绍了React如何使用axios请求数据并把数据渲染到组件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • React网络请求发起方法详细介绍

    React网络请求发起方法详细介绍

    在编程开发中,网络数据请求是必不可少的,这篇文章主要介绍了React网络请求发起方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-09-09
  • React中使用Axios进行HTTP请求

    React中使用Axios进行HTTP请求

    这篇文章主要为大家展示了如何在 React 中使用 Axios 进行 HTTP 请求,包括 GET 和 POST 请求的使用,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-11-11
  • React 项目中动态设置环境变量

    React 项目中动态设置环境变量

    本文主要介绍了React 项目中动态设置环境变量,本文将介绍两种常用的方法,使用 dotenv 库和通过命令行参数传递环境变量,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • React中super()和super(props)的区别小结

    React中super()和super(props)的区别小结

    本文主要介绍了React中super()和super(props)的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-03-03
  • 深入探讨前端框架react

    深入探讨前端框架react

    本文带领大家一起探讨前端框架react,涉及到前端框架react相关知识,对前端框架react相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • React中的受控组件与非受控组件详解

    React中的受控组件与非受控组件详解

    在React中,受控组件指的是表单元素的value值受React组件的state或props控制的组件,而非受控组件则是表单元素的value值由DOM自身负责管理的组件,本文将给大家详细介绍React受控组件与非受控组件,需要的朋友可以参考下
    2023-08-08
  • React JSX基础语法教程示例

    React JSX基础语法教程示例

    这篇文章主要为大家介绍了React JSX基础语法教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • 30分钟精通React今年最劲爆的新特性——React Hooks

    30分钟精通React今年最劲爆的新特性——React Hooks

    这篇文章主要介绍了30分钟精通React今年最劲爆的新特性——React Hooks,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • react使用CSS实现react动画功能示例

    react使用CSS实现react动画功能示例

    这篇文章主要介绍了react使用CSS实现react动画功能,结合实例形式分析了react使用CSS实现react动画功能具体步骤与实现方法,需要的朋友可以参考下
    2020-05-05

最新评论