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 hooks

    详解如何构建自己的react hooks

    我们组的前端妹子在组内分享时谈到了 react 的钩子,趁此机会我也对我所理解的内容进行下总结,方便更多的同学了解。在 React 的 v16.8.0 版本里添加了 hooks 的这种新的 API,我们非常有必要了解下他的使用方法,并能够结合我们的业务编写几个自定义的 hooks。
    2021-05-05
  • React元素与组件的区别示例详解

    React元素与组件的区别示例详解

    这篇文章主要为大家介绍了React元素与组件的区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • react组件传值的四种方法

    react组件传值的四种方法

    本文主要介绍了react组件传值的四种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • react将文件转为base64上传的示例代码

    react将文件转为base64上传的示例代码

    本文主要介绍了react将文件转为base64上传的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-09-09
  • React深入了解原理

    React深入了解原理

    React是用于构建用户界面的JavaScript库, [1]  起源于Facebook的内部项目,该公司对市场上所有 JavaScript MVC框架都不满意,决定自行开发一套,用于架设Instagram的网站
    2022-07-07
  • react中实现修改input的defaultValue

    react中实现修改input的defaultValue

    这篇文章主要介绍了react中实现修改input的defaultValue方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • React-Native TextInput组件详解及实例代码

    React-Native TextInput组件详解及实例代码

    这篇文章主要介绍了React-Native TextInput组件详解及实例代码的相关资料,需要的朋友可以参考下
    2016-10-10
  • 深入理解React Native核心原理(React Native的桥接(Bridge)

    深入理解React Native核心原理(React Native的桥接(Bridge)

    这篇文章主要介绍了深入理解React Native核心原理(React Native的桥接(Bridge),本文重点给大家介绍React Native的基础知识及实现原理,需要的朋友可以参考下
    2021-04-04
  • React组件通信实现方式详解

    React组件通信实现方式详解

    这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点,本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法,需要的朋友可以参考下
    2023-03-03
  • React组件设计过程之仿抖音订单组件

    React组件设计过程之仿抖音订单组件

    这篇文章主要介绍了React组件设计过程之仿抖音订单组件的实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07

最新评论