目录正文特点基本用途1.安装2.导入 React-native-toast3.在你的应用程序中显示一个基本的吐司4.可用的烤面包选项5.创建不同风格的祝酒词预览正文 一个功能丰富的
一个功能丰富的React Native吐司库,建立在react-hot-toast之上。
# Yarn
$ yarn add @backpackapp-io/react-native-toast
# NPM
$ npm i @backpackapp-io/react-native-toast
import { StyleSheet, Text } from 'react-native';
import { toast, Toasts } from '@backpackapp-io/react-native-toast';
import { useEffect } from 'react';
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',
},
});
toast('Hello World', {
duration: 4000,
position: ToastPosition.TOP,
icon: 'Icon Here',
styles: {
view: ViewStyle,
pressable: ViewStyle,
text: TextStyle,
indicator: ViewStyle
},
});
// 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
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0