I'm new to React Native. The alphabet is located at the top of the screen in the application. When any letter is clicked, the clicked letter appears on the screen. I want the color of the clicked letter to be different from the colors of other letters in flatlist. How can I do that?
Codes:
import React, { useState } from 'react' import { FlatList, StyleSheet, Text, TouchableOpacity, View } from 'react-native' const WordPage = () => { const [selectedLetter, setSelectedLetter] = useState("A") const alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] const _renderAlphabet = ({ item }) => { return ( <TouchableOpacity onPress={() => { setSelectedLetter(item) }}> <View style={styles.alphabetContainer}> <Text style={styles.alphabetText}>{item}</Text> </View> </TouchableOpacity> ) } return ( <View style={styles.container}> <View> <FlatList data={alphabet} renderItem={_renderAlphabet} horizontal /> </View> <Text style={styles.text}>{selectedLetter}</Text> </View> ) } export default WordPage const styles = StyleSheet.create({ container: { flex: 1, }, alphabetContainer: { width: 24, height: 24, marginLeft: 14, marginTop: 14, justifyContent: 'center', alignItems: 'center', backgroundColor: 'green' }, alphabetText: { fontSize: 18, color: 'white', }, text: { fontSize: 100, justifyContent: 'center', alignSelf: 'center' } });
You can create a custom style for selected items and apply it conditionally.
const _renderAlphabet = ({ item }) => {
return (
<TouchableOpacity onPress={() => { setSelectedLetter(item) }}>
<View style={item === selectedLetter ? styles.alphabetContainerSelected: styles.alphabetContainer}>
<Text style={styles.alphabetText}>{item}</Text>
</View>
</TouchableOpacity>
)
}
const styles = StyleSheet.create({
...
alphabetContainer: {
width: 24,
height: 24,
marginLeft: 14,
marginTop: 14,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'green'
},
alphabetContainerSelected: {
width: 24,
height: 24,
marginLeft: 14,
marginTop: 14,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'red'
},
...
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.