如何将react-native弹窗封装方法改写成长尾？

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

本文分享了react-native弹窗封装的整体代码，供大家参考。内容如下：

+ 上图 + 模拟苹果弹窗组件（Android+iOS均可用） + 以上的效果均基于本地的弹窗组件，后续将介绍上面的组件。

本文实例为大家分享了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 />);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。