web-dev-qa-db-de.com

So erstellen Sie eine horizontale Listenansicht oder eine FlatList im reaktionsbasierten Modus

Ich suche nach einer Möglichkeit, eine horizontale ListView oder FlatList In React-native zu erstellen. wie das Bild unten: https://i.stack.imgur.com/D4RA5.jpg

Ich habe versucht, es mit Flex zu verwalten, aber es bringt mir seltsame Ergebnisse und immer mit einer vertikalen ListView

Wenn Sie eine Idee haben, lassen Sie es mich wissen.

Grüße,

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

Die Antwort besteht darin, die horizontale Eigenschaft zu true hinzuzufügen.

Ja, es ist nicht im Dokument beschrieben: https://facebook.github.io/react-native/docs/listview.html

Ein ListView ist also offensichtlich ein Child eines ScrollView, also hat er den 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

44
G Clovs

Vielen Dank für die letzte Antwort, ListView ist jetzt veraltet.

lösung mit 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