在 FlatList 中反应原生 onPress 按钮

Question

也许这是一个菜鸟问题，但我不能为 FlatList 制作一个 onPress 来反应原生，由单独的文件 popularData 和 categoriesData 中的一个数组项组成。 在popularData中，我有一个数组，其中包含是否选择了boolean类型的信息，我只想获取数组的此信息，并将其放入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

您可以将您的View包含在TouchableOpacity或TouchbaleHighlight中以应用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>
    );
    
  };