单击图库组件的图像时未打开模态

Question

当我单击图库中的图像组件时，我正在尝试打开模型。在这里，我没有在 TouchableOpacity 的 onPress 方法中更新“flagImage”变量，或者当 TouchableOpacity 的 onPress 更改其值时，模态组件没有获得“flagImage”的更新值。我在这里需要帮助。每当我触摸图像组件时，模态都不会打开。它什么都不做:(下面是gallery.component.js的代码：

import React from 'react';
import { View, Image, ScrollView, TouchableOpacity, Modal, Text } from 'react-native';
import styles from './cameraStyles';

export default ({captures=[], flagImage=true}) => (
    <ScrollView 
        horizontal={true}
        style={[styles.bottomToolbar, styles.galleryContainer]} 
    >
        {captures.map(({ uri }) => (
            <View style={styles.galleryImageContainer} key={uri}>
                <TouchableOpacity 
                    onPress={()=> {
                        flagImage = !flagImage;
                        console.log('Touch: "'+flagImage+'"');          
                    }}
                >
                    <Image source={{ uri }} style={styles.galleryImage}/>
                </TouchableOpacity>
                <Modal visible={flagImage} onPress={() => {console.log('Modal: "'+flagImage+'"');flagImage = !flagImage;}} onRequestClose={() => flagImage = ! flagImage}>
                      <View>
                            <Image source={{ uri }} style={styles.galleryImageLarge}/> 
                      </View>
                </Modal>
            </View>
        ))}
    </ScrollView>
);    

Answer 1

您可以使用 useState 挂钩将道具转换为可以更新的状态。

import React from 'react';
import { View, Image, ScrollView, TouchableOpacity, Modal, Text } from 'react-native';
import styles from './cameraStyles';

export default ({captures=[], lflagImage=false}) => {
    const [flagImage, setflagImage] = React.useState(lflagImage);
    return (
    
        <ScrollView 
            horizontal={true}
            style={[styles.bottomToolbar, styles.galleryContainer]} 
        >
            {captures.map(({ uri }) => (
                <View style={flagImage?styles.galleryImageContainer:styles.galleryImageContainerView} key={uri}>
                    <TouchableOpacity 
                        onPress={()=> {
                            setflagImage(prevData => !prevData)
                            console.log('Touch: "'+flagImage+'"');          
                        }}
                    >
                        <Image source={{ uri }} style={flagImage?styles.galleryImage:styles.galleryImageLarge}/>
                    </TouchableOpacity>
                    <Modal visible={flagImage} onRequestClose={() => setflagImage(prevData => !prevData)}>
                        <View>
                                <Image source={{ uri }} style={styles.galleryImageLarge}/>
                        </View>
                    </Modal>
                </View>
            ))}
        </ScrollView>
        )
    }