您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
今天小编给大家分享一下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弹窗怎么封装”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。