javascript - 模态不会在本机反应中显示图像
问题描述
我编写了一个程序,当用户单击图像时,我在 ScrollView 中显示图像列表,弹出模式并且图像将以大尺寸显示。但这不起作用。
模态打开正常,但没有显示图像。但是我已经检查了模态渲染方法中的图像值,即 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;
两者都在同一个文件中..
截图:
解决方案
在 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>
推荐阅读
- vb6 - 无法打开 VB6 项目 - actbar.ocx 和 dll 错误
- python - 如何合并同一数据框的多列
- excel - 如何使用“If”语句比较两个条件?
- python - 在 python 中捕获 HTTP 错误的响应正文
- node.js - 无法从 Express 服务器下载 Excel 文件
- php - 如何在php中构建一个自动路由器?
- android - Jsoup 在检查 hasAttribute 方法时抛出 NullPointerException (Android)
- sql - 将包含子字符串的多行折叠成一行
- python - 为什么“import shapely”和“import gdal”不能一起使用?
- python - 强制参数进入谷歌研究(Python)