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