react-native彈窗封裝的方法
更新時(shí)間：2022年08月23日 14:43:09 作者：creat_bug
這篇文章主要為大家詳細(xì)介紹了react-native彈窗封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了react-native彈窗封裝的具體代碼，供大家參考，具體內(nèi)容如下
上圖
仿蘋果彈窗組件（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>)完整代碼
多彈窗管理不涉及，暫時(shí)介紹單個彈窗，感興趣的可以自己試試，將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>;
? }
}調(diào)用
showModal(<ModalBg />);
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react中使用forEach或map兩種方式遍歷數(shù)組
這篇文章主要介紹了react中使用forEach或map兩種方式遍歷數(shù)組，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了利用ES6語法重構(gòu)React組件的相關(guān)資料，文中通過示例代碼介紹的很詳細(xì)，對大家具有一定的參考借鑒價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
React實(shí)現(xiàn)createElement 和 cloneElement的區(qū)別
本文詳細(xì)介紹了React中React.createElement和React.cloneElement兩種方法的定義、用法、區(qū)別及適用場景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09
在react中為我們提供了一個非常有用的組件,那就是Suspense,本文主要介紹了如何使用Suspense?和?react提供的lazy結(jié)合起來達(dá)到異步加載狀態(tài)的目的,感興趣的可以了解下2024-04-04
本篇文章主要介紹了react中使用swiper的具體方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
使用 React 和 Threejs 創(chuàng)建一個VR全景項(xiàng)目的過程詳解
這篇文章主要介紹了使用 React 和 Threejs 創(chuàng)建一個VR全景項(xiàng)目的過程詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了React中使用外部樣式的3種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
React實(shí)現(xiàn)點(diǎn)擊切換組件效果
這篇文章主要為大家詳細(xì)介紹了如何基于React實(shí)現(xiàn)點(diǎn)擊切換組件效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的小伙伴可以學(xué)習(xí)一下2023-08-08
react?diff?算法實(shí)現(xiàn)思路及原理解析
這篇文章主要介紹了react?diff?算法實(shí)現(xiàn)思路及原理解析,本節(jié)我們正式進(jìn)入基本面試必考的核心地帶?--?diff?算法，了解如何優(yōu)化和復(fù)用?dom?操作的，還有我們常見的?key?的作用,需要的朋友可以參考下2022-05-05
React新擴(kuò)展函數(shù)setState與lazyLoad及hook介紹
這篇文章主要介紹了React新擴(kuò)展函數(shù)setState與lazyLoad及hook，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12