在Modal中打开ListView照片

Question

我想将Modal与ListView一起使用并在renderRow(rowData){}区域中打开但不会打开。

render()区域中的那个，但我得到了：红色的屏幕Can't Find Variable: 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>
        );
    }
}

Answer 1

我已经粘贴了你的代码，看起来你的关闭括号有一些语法错误，但我希望它只是复制粘贴错误。

首先，您不应将Modal放在renderRow函数中，它可能会在样式和数据方面产生问题。您可以将其放在主render()方法中。

如果数据可用并设置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>
    );
}

OP改变问题后编辑：

请在我的评论中找到完整的代码（未经过测试，只是添加逻辑来解决）

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>
        );
    }
}