Modal不会在本机反应中显示图像

Question

我编写了一个程序，其中当用户单击图像时会在ScrollView中显示图像列表，并弹出模态，图像将以大尺寸显示。但这是行不通的。

模态打开正常，但未显示图像。 但是我已经在Modal的render方法中检查了image的值，即ImageViewer，我得到的值是一个类对象。

应用程序：

import React, {Component} from 'react';
import {View,Modal, ScrollView, Image, TouchableOpacity, StyleSheet} from 'react-native';
import pic1 from './images/sl13.png';
import pic2 from './images/sl14.png';
import pic3 from './images/sl15.png';
import pic4 from './images/sl16.png';
import pic5 from './images/sl17.png';

class App extends Component {
    Images = [pic1, pic2, pic3, pic4, pic5];
    state = {
        modalVisible: false,
    }
    image = null

    close(){
        this.setState({modalVisible: false});
    }
    constructor(props){
        super(props);
        this.close = this.close.bind(this);
    }

    showImage(path){
        this.image = path;
        this.setState({modalVisible: true});
    }

    render() {
    return (
        <View style={{alignItems:'center', justifyContent: 'center'}}>
            <ScrollView>
            {this.Images.map((item)=>{
                return (
                    <TouchableOpacity key={item} onPress={(item)=>this.showImage(item)}>
                        <View style={{borderColor: 'red', borderWidth: 1, marginBottom: 10}}>
                            <Image style={{width: 200, height: 200}} source={item} />
                        </View>
                    </TouchableOpacity>
                    )
            })}
            </ScrollView>
            <ImageViewer closeModal={()=>this.close()} modalVisible={this.state.modalVisible} image={this.image}/>
        </View>
    );
  }
}

模式：

class ImageViewer extends Component {
    render() {
        console.log(this.props.image) //Checking Value here
        return (
            <Modal
                style={{top: '50%', left: '50%', transform: 'translate(-50%, -50%) !important'}}
                animationType='fade'
                transparent={true}
                onRequestClose={()=>this.props.closeModal()}
                visible={this.props.modalVisible}
            >
                <View style={{flex:1 ,alignItems: 'center', justifyContent: 'center', backgroundColor:'#00000069'}}>
                    <View  style={{padding:20 , backgroundColor:'#fff', borderRadius: 10}}>
                        <Image style={{width: 400, height: 600}} source={this.props.image} />
                    </View>
                </View>
            </Modal>
        )
    }
}

export default App;

都在同一个文件中。

屏幕截图：

普通：https://imgur.com/deai02Y.jpg

点击图片：https://imgur.com/POuZlPU.jpg

Answer 1

在Touchableopacity onPress上，您实际上是将onPress $ event传递给showImage函数而不是item。所以正确的方法是

<View style={{alignItems:'center', justifyContent: 'center'}}>
            <ScrollView>
            {this.Images.map((item)=>{
                return (
                    <TouchableOpacity key={item} onPress={()=>this.showImage(item)}>
                        <View style={{borderColor: 'red', borderWidth: 1, marginBottom: 10}}>
                            <Image style={{width: 200, height: 200}} source={item} />
                        </View>
                    </TouchableOpacity>
                    )
            })}
            </ScrollView>
            <ImageViewer closeModal={()=>this.close()} modalVisible={this.state.modalVisible} image={this.image}/>
        </View>

Answer 2

名为“ write”的应用程序之后

constructor(props) {
    super(props);
    this.state = {
      image : ''
    };

  }

和在showImage路径中

 showImage(path){ 
       this.setstate({image : path});
        this.setState({modalVisible: true});
    }

和在Imageviewer中

<ImageViewer closeModal={()=>this.close()} modalVisible={this.state.modalVisible} image={this.state.image}/>