Блог

может быть, кто-нибудь может мне с этим помочь. Я не знаю, почему мой onLongPress не работает. После запуска моего приложения он показывает ошибки, как в приведенной ниже ссылке: https://imageupload.io/i/0eEdzuD7CI

Пожалуйста, помогите мне!

 import React, { useState } from "react";
import {
    View,
    StyleSheet,
    Text,
    Image,[enter image description here][1]
    TouchableHighLight,
    TouchableOpacity,
    Dimensions,
    Button,
    Modal
} from "react-native";
import Icon from "react-native-vector-icons/FontAwesome"

var { width } = Dimensions.get("window");

const ListItem = (props) => {

    const [modalVisible, setModalVisible] = useState(false)

    return (
        <View>
            <Modal animationType="fade" transparent={true} visible={modalVisible} onRequestClose={() => {
                setModalVisible(false)
            }}>
                <View>
                    <View>
                        <TouchableHighLight
                            underlayColor="E8E8E8"
                            onPress={() => {
                                setModalVisible(false)
                            }}
                            style={{
                                alignSelf: "flex-end",
                                position: "absolute",
                                top: 5,
                                right: 10
                            }}
                        >
                            <Icon name="close" size={20} />
                        </TouchableHighLight>
                        <Button title="Edit" 
                            onPress={() => [
                                props.navigation.navigate("Product Form"),
                                setModalVisible(false)
                            ]}
                        />
                        <Button title="Delete"
                            // delete
                        />
                    </View>
                </View>

            </Modal>
            <TouchableOpacity
                onPress={() => {
                    props.navigation.navigate("Product Detail", { item: props })
                }}
                onLongPress={() => setModalVisible(true)}
                style={[styles.container, {
                    backgroundColor: props.index % 2 == 0 ? "white" : "gainsboro"
                }]}
            >
                <Image 
                    source={{
                        uri: props.image
                        ? props.image
                        : 'https://cdn.pixabay.com/photo/2012/04/01/17/29/box-23649_960_720.png'

                    }}
                    resizeMode="contain"
                    style={styles.image}
                />
                <Text style={styles.item}>{props.brand}</Text>
                <Text style={styles.item} numberOfLines={1} ellipsizeMode="tail">{props.name}</Text>
                <Text style={styles.item} numberOfLines={1} ellipsizeMode="tail">{props.category.name}</Text>
                <Text style={styles.item}>$ {props.price}</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flexDirection: "row",
        padding: 5,
        width: width
    },
    image: {
        borderRadius: 50,
        width: width / 6,
        height: 20,
        margin: 2
    },
    item: {
        flexWrap: "wrap",
        margin: 3,
        width: width / 6
    }
})

export default ListItem;