0
625
Views¿Cómo puedo cambiar el color del elemento seleccionado en la lista plana en React Native?
Soy nuevo en React Native. El alfabeto se encuentra en la parte superior de la pantalla de la aplicación. Cuando se hace clic en cualquier letra, la letra seleccionada aparece en la pantalla. Quiero que el color de la letra en la que se hizo clic sea diferente de los colores de otras letras en la lista plana. ¿Cómo puedo hacer eso?
Códigos:
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' } });
·
Juan Pablo Isaza
1 answers
Answer question0
Puede crear un estilo personalizado para elementos seleccionados y aplicarlo condicionalmente.
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' }, ... });
·
Juan Pablo Isaza
Report
Answer question