经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » React » 查看文章
react-native弹窗封装的方法
来源:jb51  时间:2022/8/23 15:36:49  对本文有异议

本文实例为大家分享了react-native弹窗封装的具体代码,供大家参考,具体内容如下

上图

仿苹果弹窗组件(android+ios均可用)

以上效果均基于本文的弹窗组件,后续将会介绍上面的组件,也可基于改组件定制更多组件

安装依赖 yarn add react-native-root-siblings 或者 npm install react-native-root-siblings --save

主要代码

显示弹窗

  1. export const showModal = (component) => {
  2. ? ? sibling = new RootSiblings(component);
  3. };

销毁弹窗

  1. export const destroySibling = (component) => ?sibling && sibling.destroy()

更新弹窗

  1. export const update = (index, component) => sibling && sibling.update(<View>{component}</View>)

完整代码

多弹窗管理不涉及,暂时介绍单个弹窗,感兴趣的可以自己试试,将sibling改为数组;

  1. //ShowModal.js
  2. import React from 'react';
  3. import {View} from 'react-native';
  4. import RootSiblings from 'react-native-root-siblings'; ?//全局弹框组件
  5. let sibling = null;
  6. export const showModal = (component) => {
  7. ? ? sibling = new RootSiblings(component);
  8. };
  9. export const destroySibling = (component) => ?sibling && sibling.destroy()
  10. export const update = (index, component) => sibling && sibling.update(<View>{component}</View>)

使用示例—>淡入背景

组件 ModalBg.js

  1. import React from 'react';
  2. import {Animated, InteractionManager, Easing, TouchableOpacity} from 'react-native';
  3. import {getScreenHeight, getScreenWidth} from '../../utils/util';
  4. import {destroyLastSibling} from '../showModal/ShowModal';
  5. export default class ModalBg extends React.Component {
  6. ? animated = new Animated.Value(0);
  7.  
  8. ? isShow = false;
  9.  
  10. ? componentDidMount(): void {
  11. ? ? InteractionManager.runAfterInteractions(() => {
  12. ? ? ? this.handleAni();
  13. ? ? });
  14. ? }
  15.  
  16. ? componentWillUnmount(): void {
  17. ? ? InteractionManager.runAfterInteractions(() => {
  18. ? ? ? this.handleAni();
  19. ? ? });
  20. ? }
  21.  
  22. ? handleAni = () => {
  23. ? ? Animated.timing(this.animated, {
  24. ? ? ? toValue: this.isShow ? 0 : 1,
  25. ? ? ? duration: 250,
  26. ? ? ? easing: Easing.ease
  27. ? ? }).start(() => this.isShow = !this.isShow);
  28. ? };
  29.  
  30. ? render() {
  31. ? ? const opct = this.animated.interpolate({
  32. ? ? ? inputRange: [0, 1],
  33. ? ? ? outputRange: [0, 0.4]
  34. ? ? });
  35. ? ? return <Animated.View style={{
  36. ? ? ? position: 'absolute',
  37. ? ? ? width: getScreenWidth(),
  38. ? ? ? height: getScreenHeight(),
  39. ? ? ? backgroundColor: '#000',
  40. ? ? ? opacity: opct,
  41. ? ? ? zIndex: 10
  42. ? ? }}><TouchableOpacity onPress={() => {
  43. ? ? ? destroyLastSibling();
  44. ? ? }} style={{flex: 1}} /></Animated.View>;
  45. ? }
  46. }

调用

  1. showModal(<ModalBg />);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号