今天小编给大家分享一下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 />);以上就是“react native弹窗怎么封装”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
