web-dev-qa-db-fra.com

Comment faire un ListView horizontal ou FlatList en React-Native

Je cherche un moyen de créer un ListView horizontal ou FlatList In React-native. comme l'image ci-dessous: https://i.stack.imgur.com/D4RA5.jpg

J'ai essayé de le gérer avec Flex mais ça me fait des résultats étranges, et toujours avec un ListView vertical

Si vous avez une idée, faites-le moi savoir.

Cordialement,

react-nativehorizontal-scrollingreact-native-androidreact-native-listviewreact-native-ios
21
G Clovs

La réponse est d'ajouter la propriété horizontale définie à true.

Oui, ce n'est pas décrit dans le doc: https://facebook.github.io/react-native/docs/listview.html

Donc, évidemment, un ListView est un enfant d'un ScrollView, il a donc obtenu le Bool horizontal.

<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

44
G Clovs

Merci pour la dernière réponse, ListView est désormais obsolète.

solution avec 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()}
/>
3
Shlomi Fresko