反应原生土司
英语 한국어
一个用于反应-原生的土司库, 以 反应- 热- 托斯克它支持多种祝酒会、键盘操作、刷去辞退、姿势祝酒会和联署材料承诺等特征。 它运行在iOS,和机器人,和网络.
为什么?
我知道你在想什麽又是吐司图书馆吗?) (中文(简体) ). 相信我,这是你需要的最后一个吐司图书馆 我建造这个图书馆是为了满足我具体的应用需求,在意识到它真正是一个顶尖的吐司图书馆后,决定打开它的来源. 试试看.
特征
- 多个土司,多个选项想要一个敬酒 在上,下,不同颜色,或不同类型 同时? 明白吗.
- 键盘处理 (无论是iOS还是Android). 当用户打开键盘时, 把这些祝酒词移出视线
- 撤职
- 立场土司 (上下相克相克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克
- 可自定义 (习惯风格,尺寸,持续时间,甚至创建自己的组件用于土司)
- 添加对支持 承诺 痷 打电话
toast.promise(my_promise)并观看反应 - 土生土长的功用 它的魔法, 自动更新土司 的自定义消息 关于成功 - 或一个错误消息 关于拒绝. - 运行在 网络
- 对本地模式的支持
- 新闻、秀和隐藏的回叫
文档
查看全部文档 这里
开始
安装
yarn add @backpackapp-io/react-native-toast
# or
npm i @backpackapp-io/react-native-toast
同伴依赖关系
安装和链接 反应-原生再激活, (中文(简体) ), 反应-内在-安全区域-文本,以及 反应-内在-地貌-处理器
yarn add react-native-reanimated react-native-safe-area-context react-native-gesture-handler
确保您跟踪每个软件包的安装
利用博览会?
npx expo install react-native-reanimated react-native-safe-area-context react-native-gesture-handler
酷,现在怎么办?
将您的应用包成 <GestureHandlerRootView /> 财务报告和审定财务报表 <SafeAreaProvider /> 添加( a) <Toasts /> 组件到您的应用程序根.
打电话 toast("My Toast Message") 当你准备好从 任何地方 在你的应用程序.
import { View, StyleSheet, Text } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { toast, Toasts } from '@backpackapp-io/react-native-toast';
import { useEffect } from 'react';
export default function App() {
useEffect(() => {
toast('Hello');
}, []);
return (
<SafeAreaProvider>
<GestureHandlerRootView style={styles.container}>
<View>{/*The rest of your app*/}</View>
<Toasts /> {/* <---- Add Here */}
</GestureHandlerRootView>
</SafeAreaProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
示例
常规吐司
toast("This is my first toast", {
duration: 3000,
});
保证敬酒
const sleep = new Promise((resolve, reject) => {
setTimeout(() => {
if (Math.random() > 0.5) {
resolve({
username: 'Nick',
});
} else {
reject('Username is undefined');
}
}, 2500);
});
toast.promise(
sleep,
{
loading: 'Loading...',
success: (data: any) => 'Welcome ' + data.username,
error: (err) => err.toString(),
},
{
position: ToastPosition.BOTTOM,
}
);
正在装入托拉斯
const id = toast.loading('I am loading. Dismiss me whenever...');
setTimeout(() => {
toast.dismiss(id);
}, 3000);
成功祝酒词
toast.success('Success!', {
width: 300
});
标签错误
toast.error('Wow. That Sucked!');