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

Question

目标：使用 react-native 的 FlatList 来呈现可触摸图像的列表，当按下时，显示相应图像的 Modal。

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 使用所有三个不同的图像进行渲染，但是当按下 任何 个图像按钮时，模型仅显示 最后一个图像数据数组，即使使用了相同的item.img 变量...为什么？

Answer 1

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

不要将模态框放在 FlatList renderItem 中。模态应该始终在 dom 中呈现（但不总是 visible）。只制作一个模态，并在状态中存储相关信息（模态可见性以及要在模态中显示的项目）。然后在你的 TouchableOpacity 的 onPress 中改变它