source - Ocultar barra de desplazamiento en FlatList(React Native) en Android
react-native-snap-carousel example (2)
Estoy tratando de usar FlatList (React-native) en mi aplicación. Lo estoy usando horizontalmente y puedo ver la barra de desplazamiento. Hay una opción en ScrollView para ocultar la barra de desplazamiento pero no en FlatList. ¿Alguien ha podido ocultarlo de otra manera? Intenté usar la solución del contenedor principal y secundario ( Ocultar barra de desplazamiento, pero aún así pude desplazarme ) pero no funcionó.
import React, { Component } from ''react'';
import { Text, View, FlatList, StyleSheet, ScrollView } from ''react-native'';
import { Card, Button } from ''react-native-elements'';
const data = [
{ id: 1, title: ''title 1'', details: ''details 1 details 1 details 1'' },
{ id: 2, title: ''title 2'', details: ''details 2 details 2 details 2 details 2 details 2 details 2'' },
{ id: 3, title: ''title 3'', details: ''details 3 details 3'' },
{ id: 4, title: ''title 4 title 4'', details: ''details 4'' },
];
class CategoryRow extends Component {
_keyExtractor = (item, index) => item.id;
_renderItem = (item) => {
return (
<Card style={styles.cardContainer}>
<Text>{item.title}</Text>
<Text>{item.details}</Text>
</Card>
);
}
render() {
return (
<View style={{ flex: 1, overflow:''hidden'' }}>
<View style={{ overflow:''hidden'' }}>
<Text>Category 1</Text>
<FlatList
horizontal
data={data}
renderItem={({ item }) => this._renderItem(item)}
keyExtractor={this._keyExtractor}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
cardContainer: {
width: 140,
height: 150,
borderWidth: 0.5,
borderColor: ''grey'',
overflow: ''scroll'',
},
})
export default CategoryRow;
Solo agrega
showsHorizontalScrollIndicator={false}
intente hacer esto para agregar ListView horizontal (horizontal = {verdadero}) mencionado abajo y si solo desea ocultar la barra de desplazamiento solo agregue (muestraHorizontalScrollIndicador = {falso})
<ListView showsHorizontalScrollIndicator={false}
horizontal={true}
/>