ReactNative Toast库功能强大，如何改写为长尾？

本文共计562个文字，预计阅读时间需要3分钟。

目录 + 正文 + 特点 + 基本用途

1.安装

2.导入react-native-toast

3.在应用中显示基本吐司

4.可用吐司包选项

5.创建不同风格的吐司词+预览+正文+功能丰富的React Native吐司库

目录

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

正文

一个功能丰富的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通知库的资料请关注自由互联其它相关文章！