react-native彈窗封裝的方法
更新時(shí)間：2022年08月23日 14:43:09 作者：creat_bug
這篇文章主要為大家詳細(xì)介紹了react-native彈窗封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了react-native彈窗封裝的具體代碼，供大家參考，具體內(nèi)容如下
上圖
仿蘋(píng)果彈窗組件（android+ios均可用）
以上效果均基于本文的彈窗組件，后續(xù)將會(huì)介紹上面的組件，也可基于改組件定制更多組件
安裝依賴(lài) yarn add react-native-root-siblings 或者 npm install react-native-root-siblings --save
主要代碼
顯示彈窗
export const showModal = (component) => {
? ? sibling = new RootSiblings(component);
};銷(xiāo)毀彈窗
export const destroySibling = (component) => ?sibling && sibling.destroy()
更新彈窗
export const update = (index, component) => sibling && sibling.update(<View>{component}</View>)完整代碼
多彈窗管理不涉及，暫時(shí)介紹單個(gè)彈窗，感興趣的可以自己試試，將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 />);
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)簡(jiǎn)單的拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了React封裝彈出框組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
一看就懂的ReactJs基礎(chǔ)入門(mén)教程-精華版
現(xiàn)在最熱門(mén)的前端框架有AngularJS、React、Bootstrap等。自從接觸了ReactJS，ReactJs的虛擬DOM（Virtual DOM）和組件化的開(kāi)發(fā)深深的吸引了我，下面來(lái)跟我一起領(lǐng)略ReactJs的風(fēng)采吧~~ 文章有點(diǎn)長(zhǎng)，耐心讀完，你會(huì)有很大收獲哦2021-04-04
react-router實(shí)現(xiàn)跳轉(zhuǎn)傳值的方法示例
這篇文章主要給大家介紹了關(guān)于react-router實(shí)現(xiàn)跳轉(zhuǎn)傳值的相關(guān)資料，文中給出了詳細(xì)的示例代碼，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編一起來(lái)學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
React Native (簡(jiǎn)稱(chēng)RN)是Facebook于2015年4月開(kāi)源的跨平臺(tái)移動(dòng)應(yīng)用開(kāi)發(fā)框架，是Facebook早先開(kāi)源的JS框架 React 在原生移動(dòng)應(yīng)用平臺(tái)的衍生產(chǎn)物，支持iOS和安卓?jī)纱笃脚_(tái)。本文將介紹React Native與IOS端之間的交互。2021-06-06
React.js組件實(shí)現(xiàn)拖拽排序組件功能過(guò)程解析
這篇文章主要介紹了React.js組件實(shí)現(xiàn)拖拽排序組件功能過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
使用 Rails API 構(gòu)建一個(gè) React 應(yīng)用程序的詳細(xì)步驟
這篇文章主要介紹了使用 Rails API 構(gòu)建一個(gè) React 應(yīng)用程序的詳細(xì)步驟，主要包括后端：Rails API部分，前端：React部分及React組件的相關(guān)操作，具有內(nèi)容詳情跟隨小編一起看看吧2021-08-08
這篇文章主要為大家介紹了React并發(fā)更新與性能優(yōu)化解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
React 項(xiàng)目中動(dòng)態(tài)設(shè)置環(huán)境變量
本文主要介紹了React 項(xiàng)目中動(dòng)態(tài)設(shè)置環(huán)境變量，本文將介紹兩種常用的方法，使用 dotenv 庫(kù)和通過(guò)命令行參數(shù)傳遞環(huán)境變量，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題
這篇文章主要介紹了React項(xiàng)目配置axios和反向代理和process.env環(huán)境配置等問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12