react-native彈窗封裝的方法

更新時間：2022年08月23日 14:43:09 作者：creat_bug

這篇文章主要為大家詳細介紹了react-native彈窗封裝的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了react-native彈窗封裝的具體代碼，供大家參考，具體內容如下

上圖

仿蘋果彈窗組件（android+ios均可用）

以上效果均基于本文的彈窗組件，后續(xù)將會介紹上面的組件，也可基于改組件定制更多組件

安裝依賴 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改為數(shù)組；

//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>;
? }
}

調用