为什么FlatList的renderItem属性从数组返回不一致的数据？

Question

目标：使用react-native的FlatList呈现可触摸图像的列表，该列表在被按下时显示相应图像的模态。

List.js：

import React, { useState } from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
    Modal,
    FlatList,
    Dimensions,
    TouchableOpacity,
    TouchableWithoutFeedback
} from 'react-native';
const { height, width } = Dimensions.get('window');

const List = (props) => {
    const [ visible, setVisible ] = useState(false);
    return (
        <View style={styles.container}>
            <FlatList
                data={props.data}
                numColumns={2}
                renderItem={({ item, index }) => {
                    return (
                        <View>
                            <TouchableOpacity onPress={() => setVisible(true)} style={styles.itemContainer}>
                                <Image style={styles.img} resizeMode={'contain'} source={item.img} />
                                <View style={styles.details}>
                                    <Text style={{ color: 'white', fontWeight: 'bold' }}>{item.name}</Text>
                                    <Text style={{ color: 'white' }}>{item.date}</Text>
                                </View>
                            </TouchableOpacity>
                            <Modal
                                animationType="fade"
                                transparent={false}
                                visible={visible}
                                presentationStyle={'overFullScreen'}
                            >
                                <View style={styles.modalContainer}>
                                    <TouchableWithoutFeedback onPress={() => setVisible(false)}>
                                        <Image resizeMode={'contain'} style={styles.modalImg} source={item.img} />
                                    </TouchableWithoutFeedback>
                                </View>
                            </Modal>
                        </View>
                    );
                }}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    img: {
        height: width * 0.65,
        width: width * 0.45
    },
    modalImg: {
        left: width * 0.12,
        top: height * 0.2
    },
    modalContainer: {
        flex: 1,
        backgroundColor: 'rgba(69, 74, 102, .7)'
    },
    details: {
        position: 'absolute',
        backgroundColor: 'rgba(137,137,137, 0.75)',
        borderRadius: 10,
        height: width * 0.125,
        width: width * 0.4,
        left: '4%',
        top: '75%',
        justifyContent: 'center',
        alignItems: 'center'
    }
});

export default List;

实施：

import React from 'react';
import { StyleSheet, Dimensions, SafeAreaView } from 'react-native';
import Component from './Component';

const { width } = Dimensions.get('window');

const testArr = [
    { name: 'Josh Gordon', date: 'November 7, 2019', img: require('./src/assets/img/josh.png') },
    { name: 'Kylie Jenner', date: 'December 21 2019', img: require('./src/assets/img/kylie.png') },
    { name: 'Logic', date: 'December 15, 2019', img: require('./src/assets/img/logic.png') }
];

const App = () => {
    return (
        <SafeAreaView style={styles.screen}>
            <Component data={testArr} />
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        backgroundColor: '#E6E6E6'
    }
});

export default App;

问题：初始FlatList使用所有三个不同的图像进行渲染，但是当按下图像按钮的[[any时，将以only显示数据数组中的最后一个图像，即使该图像也是相同的）使用item.img变量...为什么？

Answer 1

您拥有的模态与列表中的项目一样多，但是只有一个visible变量可供所有模态使用。单击任何项​​目时，所有模态的visible均变为true，并且它们都立即呈现，因此您只能看到其中一个。

不要将模态放在FlatList renderItem内。模态应始终在dom中呈现（但不总是visible）。仅制作一个模态，并在状态中存储相关信息（模态可见性以及在模态内显示哪个项目）。然后在您的TouchableOpacity的onPress中进行更改