React native 在Modal中打开ListView照片
我想将React native 在Modal中打开ListView照片,react-native,React Native,我想将Modal与ListView一起使用，并在renderRow（rowData）{}区域中打开它，但不打开 这在render（）区域中是正常的，但是我得到了：一个红色屏幕找不到变量：rowData 我如何解决这个问题？ 我的代码： import React, { Component } from 'react'; import { View, Text, StyleSheet, TouchableHighlight, ListView, Image, Modal, Linking } fr
ModalListViewrenderRow（rowData）{}render（）找不到变量：rowData我的代码：
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableHighlight, ListView, Image, Modal, Linking } from 'react-native';
import photosData from '../dataset/Photos'
var Dimensions = require('Dimensions')
var { width, height } = Dimensions.get('window')
export default class MyListView extends React.Component {
constructor(props) {
super(props)
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
this.state = {
dataSource: ds.cloneWithRows(photosData),
modalVisible: false,
}
}
setModalVisible(visible) {
this.setState({ modalVisible: visible });
}
renderRow(rowData) {
const img = rowData.image
return (
<TouchableHighlight style={styles.containerCell}
// onPress={() => Linking.openURL(img)}
onPress={() => { this.setModalVisible(true) }}
>
<View>
<Image
// resizeMode={Image.resizeMode.contain}
// resizeMethod={"scale"}
style={{ width: width, height: 180, }}
source={{ uri: img }}
/>
<View style={styles.footerContainer}>
<View
style={styles.imageUser}
>
<Image
style={styles.imageAvatar}
// source={{ uri: rowData.user }}
source={require('../assets/icons/footer-avatar.png')}
/>
</View>
<View style={styles.footerTextContainer}>
<Text style={{ color: 'blue' }} //I can see my photos in webview
onPress={() => Linking.openURL(img)}>
Google
</Text>
<Text style={styles.text}>{rowData.food}</Text>
<Text style={[styles.text, styles.textTitle]}>{rowData.title}</Text>
<Text style={[styles.text, styles.textBy]}>By {rowData.by}</Text>
</View>
</View>
</View>
</TouchableHighlight>
)
}
render() {
const img = rowData.image
return (
<View style={styles.container}>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => { alert("Modal has been closed."), this.setModalVisible(!this.state.modalVisible) }}
>
<View style={{ marginTop: 22 }}>
<View>
<Image
// resizeMode={Image.resizeMode.contain}
// resizeMethod={"scale"}
style={{ width: width, height: 180, }}
source={{ uri: img }} // I can'ttttttttttt see my photos in Modal
/>
<TouchableHighlight onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<ListView
style={styles.listContainer}
renderRow={this.renderRow.bind(this)}
dataSource={this.state.dataSource}
/>
</View>
);
}
}
import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableHighlight、ListView、图像、模式、链接}；
从“../dataset/Photos”导入photosData
变量维度=需要（‘维度’）
var{width，height}=Dimensions.get（'window'）
导出默认类MyListView扩展React.Component{
建造师（道具）{
超级（道具）
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）
此.state={
数据源：ds.cloneWithRows（photodata），
modalVisible:错误，
}
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
}
renderRow（行数据）{
const img=rowData.image
返回(
Linking.openURL（img）}
onPress={（）=>{this.setModalVisible（true）}
>
Linking.openURL（img）}>
谷歌
{rowData.food}
{rowData.title}
By{rowData.By}
)
}
render（）{
const img=rowData.image
返回(
{alert（“模态已关闭”）、this.setModalVisible（！this.state.modalVisible）}
>
我已经粘贴了你的代码，看起来你有小的语法错误的结束括号，但我希望这只是复制粘贴错误
首先，您不应该将您的模式
放在renderRow
函数中，它有时会对样式和数据产生问题。您可以将其放在mainrender（）
方法中
如果数据可用，则向渲染方法添加函数调用，并将此设置为this.setModalVisible（true）
例如：
render() {
return(
<View>
{/* other code */}
<Modal
animationType={'slide'}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => { this.setModalVisible(false); } }
>
<View style={{ marginTop: 22 }}>
{(/*add some condition to check availability of data */)
? this.renderRow() // rendering function
: NULL}
</View>
</Modal>
</View>
);
}
render（）{
返回(
{/*其他代码*/}
{this.setModalVisible（false）；}
>
{（/*添加一些条件以检查数据的可用性*/）
？此.renderRow（）//呈现函数
：NULL}
);
}
操作更改后编辑问题：
请在我的注释中找到完整的代码（未测试，只是添加了解决问题的逻辑）
import React，{Component}来自'React'；
从“react native”导入{视图、文本、样式表、TouchableHighlight、ListView、图像、模式、链接}；
从“../dataset/Photos”导入photosData
变量维度=需要（‘维度’）
var{width，height}=Dimensions.get（'window'）
导出默认类MyListView扩展React.Component{
建造师（道具）{
超级（道具）
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）
此.state={
数据源：ds.cloneWithRows（photodata），
modalVisible:错误，
当前图像：“”
}
}
setModalVisible（可见，img）{
this.setState（{modalVisible:visible，currentImage:img}）；//设置当前映像路径以在模式中显示它
}
renderRow（行数据）{
const img=rowData.image
返回(
Linking.openURL（img）}
onPress={（）=>{this.setModalVisible（true，img）}//将图像scr传递给函数
>
Linking.openURL（img）}>
谷歌
{rowData.food}
{rowData.title}
By{rowData.By}
)
}
render（）{
//const img=rowData.image
返回(
{alert（“模态已关闭”）、this.setModalVisible（！this.state.modalVisible）}
>
{
this.setModalVisible（！this.state.modalVisible）
}}>
隐藏模态
);
}
}
亲爱的@jigar shah我不太明白，我遇到语法错误，我用一张照片更新了我的问题，我想在模式中获取每个rowData.image，我应该在渲染区域中使用“``````` bot，我遇到了错误，我在照片中描述过，你能修复我的代码吗？，我再次更新了我的代码，现在我得到：找不到变量：rowData
如何修复您当前的代码在render（）中有const img=rowData.image
，无法在那里访问。因此，您正在获取找不到变量：rowData
亲爱的@jigar shah我如何解决这个问题？我需要在模式视图中打开每张照片，在web视图中是可以的，因为这在renderRow（rowData）中{
您可以在renderRow（）
中创建一个数组来存储图像的src，在这里您可以访问rowData.image
，然后您可以使用Mod
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableHighlight, ListView, Image, Modal, Linking } from 'react-native';
import photosData from '../dataset/Photos'
var Dimensions = require('Dimensions')
var { width, height } = Dimensions.get('window')
export default class MyListView extends React.Component {
constructor(props) {
super(props)
const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })
this.state = {
dataSource: ds.cloneWithRows(photosData),
modalVisible: false,
currentImage: ''
}
}
setModalVisible(visible, img) {
this.setState({ modalVisible: visible, currentImage: img }); // set current image path to show it in modal
}
renderRow(rowData) {
const img = rowData.image
return (
<TouchableHighlight style={styles.containerCell}
// onPress={() => Linking.openURL(img)}
onPress={() => { this.setModalVisible(true, img) }} // pass image scr to function
>
<View>
<Image
// resizeMode={Image.resizeMode.contain}
// resizeMethod={"scale"}
style={{ width: width, height: 180, }}
source={{ uri: img }}
/>
<View style={styles.footerContainer}>
<View
style={styles.imageUser}
>
<Image
style={styles.imageAvatar}
// source={{ uri: rowData.user }}
source={require('../assets/icons/footer-avatar.png')}
/>
</View>
<View style={styles.footerTextContainer}>
<Text style={{ color: 'blue' }} //I can see my photos in webview
onPress={() => Linking.openURL(img)}>
Google
</Text>
<Text style={styles.text}>{rowData.food}</Text>
<Text style={[styles.text, styles.textTitle]}>{rowData.title}</Text>
<Text style={[styles.text, styles.textBy]}>By {rowData.by}</Text>
</View>
</View>
</View>
</TouchableHighlight>
)
}
render() {
// const img = rowData.image
return (
<View style={styles.container}>
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => { alert("Modal has been closed."), this.setModalVisible(!this.state.modalVisible) }}
>
<View style={{ marginTop: 22 }}>
<View>
<Image
// resizeMode={Image.resizeMode.contain}
// resizeMethod={"scale"}
style={{ width: width, height: 180, }}
source={{ uri: this.state.currentImage }} // use currentImage scr to show on clicking list item
/>
<TouchableHighlight onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}}>
<Text>Hide Modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<ListView
style={styles.listContainer}
renderRow={this.renderRow.bind(this)}
dataSource={this.state.dataSource}
/>
</View>
);
}
}