返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ReactNative功能丰富的Toast通知库
  • 443
分享到

ReactNative功能丰富的Toast通知库

ReactNativeToast通知库ReactNativeToast 2022-11-13 18:11:43 443人浏览 薄情痞子
摘要

目录正文特点基本用途1.安装2.导入 React-native-toast3.在你的应用程序中显示一个基本的吐司4.可用的烤面包选项5.创建不同风格的祝酒词预览正文 一个功能丰富的

正文

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

特点

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

基本用途

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>{}</View>
      <Toasts /> {}
    </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通知库的资料请关注编程网其它相关文章!

--结束END--

本文标题: ReactNative功能丰富的Toast通知库

本文链接: https://lsjlt.com/news/170123.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作