react-native - horizontal - react native flatlist source code

Cómo hacer un ListView horizontal, o FlatList en reaccion-native

Question

Estoy buscando una forma de hacer un ListView horizontal o FlatList en React-native. como la imagen de abajo: https://i.stack.imgur.com/D4RA5.jpg

Intenté manejarlo con Flex, pero me hace extrañar los resultados y siempre con un ListView vertical.

Si tienes alguna idea, házmelo saber.

Saludos,

Answer 1

Gracias por la última respuesta, ListView ahora está en desuso.

solución con FlatList:

<FlatList
style={styles.videos_flatList}
horizontal={true}
data={data1}
renderItem={({item}) =>
<RowItem/>
}
ItemSeparatorComponent={() => {
return (
<View
style={{
height: "100%",
width: 20,
backgroundColor: "#CED0CE",
}}
/>
);
}}
keyExtractor={(item, index) => index.toString()}
/>

Answer 2

La respuesta es agregar el conjunto de propiedades horizontales a true .

Sí, no se describe en el documento: https://facebook.github.io/react-native/docs/listview.html

Así que, obviamente, un ListView es un hijo de un ScrollView, así que consiguió el Horizontal Bool.

<ListView
horizontal={true}
style={{flex:1}}
dataSource={this.state.dataSource}
renderRow={(data) => <Row {...data} />}
/>
<FlatList
horizontal={true}
data={this.props.data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>

Ciao