为什么 FlatList 的 renderItem prop return 数组中的数据不一致？

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 中改变它

为什么 FlatList 的 renderItem prop return 数组中的数据不一致？

Why does FlatList's renderItem prop return inconsistent data from array?

react-native

react-native-flatlist