react-native弹窗封装的方法

本文实例为大家分享了react-native弹窗封装的具体代码,供大家参考,具体内容如下

上图

仿苹果弹窗组件(android+ios均可用)

以上效果均基于本文的弹窗组件,后续将会介绍上面的组件,也可基于改组件定制更多组件

安装依赖 yarn add react-native-root-siblings 或者 npm install react-native-root-siblings --save

主要代码

显示弹窗

export const showModal = (component) => {     sibling = new RootSiblings(component); };

销毁弹窗

export const destroySibling = (component) =>  sibling && sibling.destroy()

更新弹窗

export const update = (index, component) => sibling && sibling.update(<View>{component}</View>) 完整代码

多弹窗管理不涉及,暂时介绍单个弹窗,感兴趣的可以自己试试,将sibling改为数组;

//ShowModal.js import React from 'react'; import {View} from 'react-native'; import RootSiblings from 'react-native-root-siblings';  //全局弹框组件 let sibling = null; export const showModal = (component) => {     sibling = new RootSiblings(component); }; export const destroySibling = (component) =>  sibling && sibling.destroy() export const update = (index, component) => sibling && sibling.update(<View>{component}</View>)

使用示例—>淡入背景

组件 ModalBg.js

import React from 'react'; import {Animated, InteractionManager, Easing, TouchableOpacity} from 'react-native'; import {getScreenHeight, getScreenWidth} from '../../utils/util'; import {destroyLastSibling} from '../showModal/ShowModal'; export default class ModalBg extends React.Component {   animated = new Animated.Value(0);   isShow = false;   componentDidMount(): void {     InteractionManager.runAfterInteractions(() => {       this.handleAni();     });   }   componentWillUnmount(): void {     InteractionManager.runAfterInteractions(() => {       this.handleAni();     });   }   handleAni = () => {     Animated.timing(this.animated, {       toValue: this.isShow ? 0 : 1,       duration: 250,       easing: Easing.ease     }).start(() => this.isShow = !this.isShow);   };   render() {     const opct = this.animated.interpolate({       inputRange: [0, 1],       outputRange: [0, 0.4]     });     return <Animated.View style={{       position: 'absolute',       width: getScreenWidth(),       height: getScreenHeight(),       backgroundColor: '#000',       opacity: opct,       zIndex: 10     }}><TouchableOpacity onPress={() => {       destroyLastSibling();     }} style={{flex: 1}} /></Animated.View>;   } }

调用

showModal(<ModalBg />);

推荐阅读