如何在 react-native 中执行水平 ListView 或 FlatList答案

【问题标题】：How to do an Horizontal ListView, or FlatList in react-native如何在 react-native 中执行水平 ListView 或 FlatList
【发布时间】：2017-07-03 21:25:51
【问题描述】：

我正在寻找一种在 React-native 中制作水平 ListView 或 FlatList 的方法。

如下图：

我尝试使用 Flex 来管理它，但结果让我感到奇怪，而且总是使用垂直的 ListView

如果你有任何想法，请告诉我。

问候，

【问题讨论】：

你没有尝试过 React native ScrollView (facebook.github.io/react-native/docs/scrollview.html) with Horizontal={true} 属性吗？它对我有用。
谢谢 Dinith ;-) 你刚刚解决了我的问题

标签： react-native horizontal-scrolling react-native-android react-native-listview react-native-ios

【解决方案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}
/>

调

【讨论】：

一个很好的答案，但实际上ListView 在后台使用ScrollView。

【解决方案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()}
/>

【讨论】：