Как сделать горизонтальный список ListView или FlatList в режиме реагирования

Я ищу способ сделать горизонтальный ListView или FlatList In React-native. как изображение ниже: https://i.stack.imgur.com/D4RA5.jpg

Я попытался управлять им с помощью Flex, но он заставляет меня изменять результаты и всегда с вертикальным списком ListView

Ответы

Ответ 1

Ответ заключается в том, чтобы добавить свойство горизонтали в значение true.

Да, это не описано в документе: https://facebook.github.io/react-native/docs/listview.html

Поэтому, очевидно, ListView является дочерним элементом ScrollView, поэтому он получил 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}
    />

Чао

Ответ 2

Спасибо за последний ответ, ListView теперь устарел.

решение с 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()}
                />