由于 iOS 没有内置的 toast 功能,因此 React Native 开发人员必须实现自己的跨平台 toast 库。
react-native-root-toast是开发人员与 React Native 社区共享的一种解决方案。
我们推荐此解决方案,因为它是最常用和维护最多的开源库之一,无需本机代码即可在 iOS 和 Android
上运行。它还提供了许多自定义选项,这意味着您将能够将 Toast 的设计与应用程序的其余部分相匹配。
用法
要使用react-native-root-toast
- npm安装模块
npm install react-native-root-toast
- yarn安装模块
yarn add react-native-root-toast
接下来,您必须包装应用程序的根组件,<RootSiblingParent>
以允许在应用程序的任何部分进行toast。
import { RootSiblingParent } from 'react-native-root-siblings';
// in your render function
return (
<RootSiblingParent> // <- use RootSiblingParent to wrap your root component
<App />
</RootSiblingParent>
);
然后,在您的应用程序中的任何位置,您都可以import Toast from 'react-native-root-toast';
呼叫 Toast.show并Toast.hide管理屏幕上的祝酒词。
import Toast from 'react-native-root-toast';
// Add a Toast on screen.
let toast = Toast.show('Request failed to send.', {
duration: Toast.durations.LONG,
});
// You can manually hide the Toast, or it will automatically disappear after a `duration` ms timeout.
setTimeout(function hideToast() {
Toast.hide(toast);
}, 500);
react-native-root-toast
如果您想以声明方式管理您的 toast,还有一个组件 API。
<Toast visible={this.state.visible}>Thanks for subscribing!</Toast>
参考文档
《How to display a popup toast》https://docs.expo.io/ui-programming/react-native-toast/
《react-native-root-toast 项目主页》https://github.com/magicismight/react-native-root-toast