react native彈窗怎么封裝

今天小編給大家分享一下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彈窗怎么封裝”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。