RN封装的底部向上弹出的弹出层组件

组件代码

js 复制代码
import React from 'react';
import { View, StyleSheet, Modal, TouchableOpacity, Text, TouchableWithoutFeedback } from 'react-native';

const BottomPopup = ({ visible, onClose, children, leftButtonTitle, rightButtonTitle, onLeftButtonPress, onRightButtonPress }) => {

  const handleLeftButtonPress = () => {
    onLeftButtonPress();
    onClose();
  };

  const handleRightButtonPress = () => {
    onRightButtonPress();
    onClose();
  };

  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={visible}
      onRequestClose={onClose}
    >
      <TouchableWithoutFeedback onPress={onClose}>
        <View style={styles.container}>
          <View style={styles.popup}>
            <View style={styles.buttonsContainer}>
              <TouchableOpacity onPress={handleLeftButtonPress} style={styles.leftButton}>
                <Text style={styles.leftButtonText}>{leftButtonTitle}</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={handleRightButtonPress} style={styles.rightButton}>
                <Text style={styles.rightButtonText}>{rightButtonTitle}</Text>
              </TouchableOpacity>
            </View>
            {children}
          </View>
        </View>
      </TouchableWithoutFeedback>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  popup: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    padding: 20,
    elevation: 5,
  },
  buttonsContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  leftButton: {
    padding: 10,
  },
  leftButtonText: {
    color: 'blue',
    fontSize: 16,
  },
  rightButton: {
    padding: 10,
  },
  rightButtonText: {
    color: 'blue',
    fontSize: 16,
  },
});

export default BottomPopup;

使用方式

js 复制代码
import React, { useState } from 'react';
import { View, Button, Text } from 'react-native';
import BottomPopup from './BottomPopup';

const MyComponent = () => {
  const [isVisible, setIsVisible] = useState(false);

  const togglePopup = () => {
    setIsVisible(!isVisible);
  };

  const handleCancelButtonPress = () => {
    console.log('取消按钮被点击');
  };

  const handleConfirmButtonPress = () => {
    console.log('确认按钮被点击');
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="打开弹出框" onPress={togglePopup} />
      <BottomPopup 
        visible={isVisible} 
        onClose={togglePopup}
        leftButtonTitle="取消"
        onLeftButtonPress={handleCancelButtonPress}
        rightButtonTitle="确认"
        onRightButtonPress={handleConfirmButtonPress}
      >
        <Text>这是弹出框的内容</Text>
      </BottomPopup>
    </View>
  );
};

export default MyComponent;

参数说明

  • visible (boolean): 控制弹出框是否可见。
  • onClose (function): 关闭弹出框的回调函数。
  • leftButtonTitle (string): 左上按钮的标题。
  • onLeftButtonPress (function): 左上按钮点击时触发的回调函数。
  • rightButtonTitle (string): 右上按钮的标题。
  • onRightButtonPress (function): 右上按钮点击时触发的回调函数。

效果图(点击确认或者取消或者阴影部分均可以关闭弹出框)

相关推荐
科技探秘人7 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人7 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR13 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香15 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969317 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai23 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91532 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫6 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试