如何在react-native中执行Horizo​​ntal ListView或FlatList

Question

我正在寻找一种在React-native中创建水平ListView或FlatList的方法。 如下图所示：https://i.stack.imgur.com/D4RA5.jpg

我尝试使用Flex管理它，但它让我感觉很奇怪，并且总是使用垂直ListView

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

此致

Answer 1

答案是将水平属性集添加到true。

是的，它没有在文档中描述：https://facebook.github.io/react-native/docs/listview.html

显然，ListView是ScrollView的Child，所以他得到了Horizo​​ntal 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}
/>

侨

Answer 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()}
/>