在 FlatList 中反应原生 onPress 按钮

Question

也许这是一个菜鸟问题，但我无法为 FlatList 制作一个 onPress，以响应本机由单独文件popularData 和 categoriesData 中的一个数组项组成。在popularData我有一个数组，它的信息是被选中还是不是布尔类型，我只想获取数组的这个信息，然后把它放到onPress方法中，如果它被按下并将它更改为true或false，并将其更改为另一个，并进一步获取该数据并将其获取到某个变量。你能帮我么 ？我已经尝试使用handleClick，导航但仍然无法达到我想要的这些是代码： 包含数组信息的文件 1：

const popularData = [
    {
        id: '1',
        image: require('../images/pizza1.png'),
        title: 'Salami Pizza',
        weight: '600 gr',
        rating: '5.0',
        cena: '26,99 zł',
        rozmiarNazwa: 'Średnia',
        rozmiarNumer: '42 cm',
        ciasto: 'Cienkie',
        czasDostawy: '~30 min',
        skladniki: [

            {
                id: '0',
                name: 'Sos pomidorowy',
                image: require('../images/skladniki/sosczerwony.png'),
                selected: true,
            },

            {
                id: '1',
                name: 'Ser',
                image: require('../images/skladniki/ser.png'),
                selected: true,
            },

            {
                id: '2',
                name: 'Salami',
                image: require('../images/skladniki/salamenapoli.png'),
                selected: true,
            },

            {
                id: '3',
                name: 'Oliwki zielone',
                image: require('../images/skladniki/zieloneoliwki.png'),
                selected: true,
            },

            {
                id: '5',
                name: 'Pieczarki',
                image: require('../images/skladniki/pieczarki.png'),
                selected: false,
            },

            {
                id: '6',
                name: 'Tabasco Habanero',
                image: require('../images/skladniki/tabascobordowe.png'),
                selected: false,
            },
        ],
    },
export default popularData;

另一个文件应用程序屏幕

const renderSkladnikiItem = ({ item }) => {
    return (
        
      <View style={[styles.skladnikiItemWrapper, {
          backgroundColor: item.selected ? colors.glowny : colors.tlo,
          marginLeft: item.id === '0' ? 20 : 5, 
      } ]}>
        <Image source={item.image} style={styles.skladnikImage} />
      </View>
    );
    
  };

{/* Skladniki */}
      <View style={styles.skladnikiWrapper}>
        <Text style={styles.skladnikiTytul}>Składniki</Text>
        <View style={styles.sklanikiListaWrapper}>
          <FlatList
            data={item.skladniki}
            renderItem={renderSkladnikiItem}
            keyExtractor={(item) => item.id}
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            decelerationRate="normal"
          />
        </View>
      </View>

 

Answer 1

您可以在TouchableOpacity 或TouchbaleHighlight 中附上您的View 以申请onPress。

const renderSkladnikiItem = ({ item }) => {
    return (
        <TouchableHighlight
      key={item.key}
      onPress={() => onPress(item)}
        >
      <View style={[styles.skladnikiItemWrapper, {
          backgroundColor: item.selected ? colors.glowny : colors.tlo,
          marginLeft: item.id === '0' ? 20 : 5, 
      } ]}>
        <Image source={item.image} style={styles.skladnikImage} />      
       </View>
      </TouchableHighlight>
    );
    
  };