模态不会在本机反应中显示图像答案

【问题标题】：Modal won't show the image in react native模态不会在本机反应中显示图像
【发布时间】：2019-08-27 09:05:30
【问题描述】：

我编写了一个程序，当用户单击一个图像时，我在 ScrollView 中显示一个图像列表，一个模态被弹出并且图像将以大尺寸显示。但这不起作用。

模态打开正常，但没有显示图像.. 但是我已经检查了 Modal 的渲染方法中图像的值，即 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

【问题讨论】：

标签： javascript react-native react-native-android jsx

【解决方案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>

【讨论】：

【解决方案2】：

应用调用后写入

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}/>

【讨论】：