Önceki anlatıma nazaran bu kısımda flatlist ile listede seçim yapma ve bu listeye isteğe bağlı renk verebilme gibi özellikler eklenecek.
Örneğin kodları şu şekilde.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import React from 'react'; import { SafeAreaView, TouchableOpacity, FlatList, StyleSheet, Text, } from 'react-native'; const DATA = [ { id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba', title: 'birim 1', }, { id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63', title: 'birim 2', }, { id: '58694a0f-3da1-471f-bd96-145571e29d72', title: 'birim 3', }, ]; function Item({ id, title, selected, onSelect }) { return ( <TouchableOpacity onPress={() => onSelect(id)} style={[ styles.item, { backgroundColor: selected ? '#6e3b6e' : '#f9c2ff' }, ]} > <Text style={styles.title}>{title}</Text> </TouchableOpacity> ); } export default function App() { const [selected, setSelected] = React.useState(new Map()); const onSelect = React.useCallback( id => { const newSelected = new Map(selected); newSelected.set(id, !selected.get(id)); setSelected(newSelected); }, [selected], ); return ( <SafeAreaView style={styles.container}> <Text> yusufpamukcu.com </Text> <FlatList data={DATA} renderItem={({ item }) => ( <Item id={item.id} title={item.title} selected={!!selected.get(item.id)} onSelect={onSelect} /> )} keyExtractor={item => item.id} extraData={selected} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, marginTop: 50, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, item: { backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, }, }); |
İlk Yorumu Siz Yapın