react native - 向项目添加不同的图标并使它们可按下

Question

我使用 'react-native-super-grid' 库，我试图找出如何处理以下两种情况：

为网格中的每个项目显示不同的图标例如：PinIcon 将用于 'qq' 而 CatIcon 将用于 'ww'.
如何使用 'pressable' 或 'TouchableOpacity'
使项目可点击

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { FlatGrid } from 'react-native-super-grid';
import PinIcon from '../src/assets/PinIcon.svg';
import CatIcon from '../src/assets/CatIcon.svg';

  const HomeComponent = () => {
  const [items, setItems] = React.useState([
    { name: 'qq', code: 'white' },
    { name: 'ww', code: 'white' },
    { name: `ee`, code: 'white' },
    { name: 'rr', code: 'white' },
    { name: 'tt', code: 'white' },
    { name: 'yy', code: 'white' },
    { name: 'uu', code: 'white' },
  ]);

  return (
    <FlatGrid
      itemDimension={130}
      data={items}
      style={styles.gridView}
      spacing={10}
      renderItem={({ item }) => (
        <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
          <PinIcon />
          <CatIcon />
          <Text style={styles.itemName}>{item.name}</Text>
          <Text style={styles.itemCode}>{item.code}</Text>
        </View>
      )}
    />
  );
};

Answer 1

最初将图标设置为项目作为图标道具并使图标可触摸，用 Pressable 或 TouchableOpacity 包装图标并在 onPress 道具中传递函数，如下所示

...
  const [items, setItems] = React.useState([
    { name: 'qq', code: 'white', icon: <PinIcon/> },
    { name: 'ww', code: 'white', icon: <CatIcon/> },
    { name: `ee`, code: 'white', icon: <DogIcon/> },
    ...
  ]);
...
  renderItem={({ item, index }) => (
    <View style={[styles.itemContainer, { backgroundColor: item.code }]}>
      <Pressable onPress={()=>onPressFunctionHere()}>
      {item.icon}
      </Pressable>
      <Text style={styles.itemName}>{item.name}</Text>
      <Text style={styles.itemCode}>{item.code}</Text>
    </View>
  )}

react native - 向项目添加不同的图标并使它们可按下

react native - add diffrent icons to items and also make them pressable

javascript

typescript

react-native

svg