0
355
Views¿Cómo hacer una FlatList horizontal con React Native?
Estoy tratando de alinear esos círculos blancos en filas y he escrito lo mismo en el código, pero estos círculos se están alineando en columnas, alguien puede ayudar, por favor.
Componente Mi Item :
const Item = ({ item }) => ( <View style={styles.citiesContainer}> <View> <Text style={styles.cities}>{item}</Text></View> </View> ); const styles = StyleSheet.create({ citiesContainer: { display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', overflow: 'hidden', height: 120, width: '100%', justifyContent: 'space-evenly', alignContent: 'center', backgroundColor: 'red' }, cities: { fontSize: 10, flex: 1, color: 'black', width: 100, height: 100, borderRadius: 50, backgroundColor: '#f0f0f0' } });Donde lo estoy renderizando:
const renderItem = ({ item }) => ( <Item title={item} /> ); <FlatList data={cities} renderItem={renderItem} keyExtractor={item => item} />Mira la imagen de abajo para ver lo que estoy explicando:
·
Juan Pablo Isaza
1 answers
Answer question0
Veo en los comentarios que está utilizando FlatList , por lo que para tener elementos en una fila, debe usar horizontal={true} en FlatList .
<FlatList data={cities} renderItem={renderItem} keyExtractor={item => item} horizontal={true} /> También veo en los comentarios que renderItem es así:
const renderItem = ({ item }) => ( <Item title={item} /> ); Entonces, en el componente Item , debería obtener el title como parte de los accesorios. Y finalmente, hay algunas correcciones para hacer en la parte de estilo, así:
const Item = ({ title }) => ( <View style={styles.city}> <Text >{title}</Text> </View> ); const styles = StyleSheet.create({ city: { fontSize: 10, color: 'black', width: 100, height: 100, borderRadius: 50, backgroundColor: '#f0f0f0' } });
·
Juan Pablo Isaza
Report
Answer question