本文实例为大家分享了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>;
- ? }
- }
调用
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。