我使用“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>
)}
/>
);
};
uj5u.com熱心網友回復：
最初將圖示設定為專案作為圖示道具并使圖示可觸摸，用 Pressableor包裹圖示并在道具中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>
)}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/459421.html
標籤：javascript 打字稿 反应式 svg
上一篇：一個SVG的多個路徑的多個復選框
下一篇：在SVG上居中文本元素