嘿，我来一步步带你实现一个功能完善、和示例表现完全一致的React Native Modal组件。咱们先从基础的内置Modal说起，再封装成可复用的自定义组件。

一、先搞懂React Native内置Modal的基础用法 #

React Native自带了Modal组件，这是我们自定义Modal的核心基础。它支持控制显示状态、动画类型、遮罩交互等核心功能。

先看一个最基础的使用示例：

import React, { useState } from 'react';
import { View, Modal, Text, TouchableOpacity } from 'react-native';

export default function BasicModalDemo() {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const toggleModal = () => {
    setIsModalVisible(!isModalVisible);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <TouchableOpacity onPress={toggleModal} style={{ padding: 10, backgroundColor: '#2196F3' }}>
        <Text style={{ color: 'white' }}>打开Modal</Text>
      </TouchableOpacity>

      <Modal
        visible={isModalVisible}
        animationType="slide" // 可选：none, slide, fade
        transparent={true} // 开启透明背景，方便自定义遮罩
        onRequestClose={toggleModal} // Android必须的回调，处理返回键
      >
        {/* 自定义遮罩和内容 */}
        <View style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center' }}>
          <View style={{ width: '80%', backgroundColor: 'white', borderRadius: 10, padding: 20 }}>
            <Text>这是一个基础Modal</Text>
            <TouchableOpacity onPress={toggleModal} style={{ marginTop: 20, alignSelf: 'flex-end' }}>
              <Text style={{ color: '#2196F3' }}>关闭</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    </View>
  );
}

二、封装功能完整的自定义Modal组件 #

如果要实现和示例完全一致的表现，我们需要把Modal封装成可复用的组件，支持自定义内容、关闭逻辑、动画效果等。下面是一个完整的封装示例：

1. 自定义Modal组件代码（CustomModal.js） #

import React from 'react';
import { View, Modal, TouchableOpacity, StyleSheet, Text } from 'react-native';

const CustomModal = ({ visible, onClose, children }) => {
  // 点击遮罩关闭Modal
  const handleOverlayPress = () => {
    onClose();
  };

  // 阻止内容区域点击透传到遮罩
  const handleContentPress = (e) => {
    e.stopPropagation();
  };

  return (
    <Modal
      visible={visible}
      animationType="fade" // 这里用淡入淡出，也可以改成slide
      transparent={true}
      onRequestClose={onClose}
    >
      <TouchableOpacity 
        style={styles.overlay} 
        onPress={handleOverlayPress}
        activeOpacity={1} // 取消遮罩点击的透明度变化
      >
        <View style={styles.modalContent} onPress={handleContentPress}>
          {/* 关闭按钮 */}
          <TouchableOpacity onPress={onClose} style={styles.closeButton}>
            <Text style={styles.closeButtonText}>×</Text>
          </TouchableOpacity>
          {/* 自定义内容区域 */}
          <View style={styles.contentContainer}>
            {children}
          </View>
        </View>
      </TouchableOpacity>
    </Modal>
  );
};

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    width: '90%',
    maxWidth: 400,
    backgroundColor: 'white',
    borderRadius: 12,
    overflow: 'hidden',
    elevation: 8, // Android阴影
    shadowColor: '#000', // iOS阴影
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 4,
  },
  closeButton: {
    alignSelf: 'flex-end',
    padding: 12,
  },
  closeButtonText: {
    fontSize: 24,
    color: '#666',
    fontWeight: 'bold',
  },
  contentContainer: {
    padding: 20,
    paddingTop: 0, // 抵消关闭按钮的padding
  },
});

export default CustomModal;

2. 使用自定义Modal组件 #

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import CustomModal from './CustomModal';

export default function App() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <TouchableOpacity 
        onPress={() => setModalVisible(true)}
        style={styles.openButton}
      >
        <Text style={styles.openButtonText}>打开自定义Modal</Text>
      </TouchableOpacity>

      <CustomModal 
        visible={modalVisible}
        onClose={() => setModalVisible(false)}
      >
        {/* 这里放你需要的Modal内容 */}
        <Text style={styles.modalTitle}>这是自定义Modal的标题</Text>
        <Text style={styles.modalDesc}>
          这里可以添加任意内容，比如表单、列表、图片等等，完全按照你的需求来定制。
        </Text>
      </CustomModal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  openButton: {
    backgroundColor: '#2196F3',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
  },
  openButtonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: '500',
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  modalDesc: {
    fontSize: 14,
    color: '#666',
    lineHeight: 20,
  },
});

三、根据需求调整功能 #

如果你的示例Modal有特殊需求，比如：

• 不同的动画效果：可以修改animationType，或者用Animated API实现自定义动画
• 禁止点击遮罩关闭：去掉TouchableOpacity包裹的遮罩，换成普通View即可
• 底部弹出的Modal：调整modalContent的样式，把justifyContent改成flex-end，让内容贴底部
• 自定义关闭按钮样式：直接修改closeButton和closeButtonText的样式就行

这样封装的组件完全可以复用，你只需要传入visible控制显示状态，onClose处理关闭逻辑，然后在组件内部添加自定义内容即可。

内容的提问来源于stack exchange，提问作者Denisugo