如何向React-Native-Modal传递图片地址等Props？

当然可以传递图片地址这类Props给react-native-modal组件啦！其实你可能没get到一个关键点：react-native-modal本身只是一个模态容器组件，它并不直接内置图片展示功能，但你完全可以通过自定义封装，把图片地址作为Props传入，然后在模态框内部自由渲染图片。

给你举个实际可复用的代码例子，你可以自己封装一个带图片的模态组件：

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

const ImageModal = ({ isVisible, imageUrl, onClose }) => {
  return (
    <Modal 
      isVisible={isVisible} 
      onBackdropPress={onClose}
      backdropColor="rgba(0,0,0,0.7)"
    >
      <TouchableOpacity style={styles.modalContent} onPress={onClose}>
        <Image 
          source={{ uri: imageUrl }} 
          style={styles.modalImage}
          resizeMode="contain"
          alt="模态框展示图片"
        />
        <Text style={styles.closeBtnText}>点击关闭</Text>
      </TouchableOpacity>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContent: {
    backgroundColor: '#fff',
    borderRadius: 12,
    padding: 16,
    alignItems: 'center',
    marginHorizontal: 20,
  },
  modalImage: {
    width: '100%',
    height: 300,
    marginBottom: 12,
  },
  closeBtnText: {
    color: '#007AFF',
    fontSize: 16,
    fontWeight: '500',
  },
});

export default ImageModal;

然后在父组件里使用这个自定义模态框时，直接把图片地址传进去就行：

// 父组件示例
import { useState } from 'react';
import { Button, View } from 'react-native';
import ImageModal from './ImageModal';

const ParentComponent = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 这里可以是本地图片路径或者网络图片地址
  const demoImageUrl = 'https://example.com/your-target-image.jpg';

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button 
        title="打开图片模态框" 
        onPress={() => setIsModalVisible(true)} 
      />
      <ImageModal 
        isVisible={isModalVisible}
        imageUrl={demoImageUrl}
        onClose={() => setIsModalVisible(false)}
      />
    </View>
  );
};

export default ParentComponent;

简单总结下：react-native-modal负责提供模态框的基础交互能力（显示/隐藏、背景点击关闭、动画等），而你可以在它内部嵌套任何React Native组件（包括Image），并通过自定义Props传递你需要的任何参数——比如图片地址、自定义样式、关闭回调等。官方文档没提到这类场景，是因为这属于组件的自定义扩展，而非组件本身的内置功能~

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