Question

我试图实现一个有两行的水平滚动列表。使用FlatList，垂直滚动列表涉及设置numColumns，但没有使用水平行的等效项。

我成功地使它能够正确渲染，并且它完美无缺。但是，会发出警告，指出flexWrap或VirtualizedList不支持设置FlatList，并使用numColumns。我不能使用numColumns，因为它不适用于水平列表。

<FlatList
    horizontal={true}
    contentContainerStyle={{
        flexDirection: 'column',
        flexWrap: 'wrap'
    }}
    {...otherProps}
/>

我发现了添加此警告的提交，但无法找到其背后的原因。似乎没有办法在没有警告被抛出的情况下完成这项工作，至少在没有完全放弃FlatList的情况下。对于包含行的水平列表，是否有更合适的解决方案？

参考文献：

提交添加警告：https://github.com/facebook/react-native/commit/eac399b
FlatList文档：https://facebook.github.io/react-native/docs/flatlist.html

Answer 1

在这种情况下，请不要使用horizontal={true} 您应该使用numColumns等长数据/ 2 并将其放在<ScrollView>标签上

<ScrollView>
    <FlatList
    contentContainerStyle={{
        alignSelf: 'flex-start'
    }}
    numColumns={listData.length / 2}
    showsVerticalScrollIndicator={false}
    showsHorizontalScrollIndicator={false}
    data={listData}
    renderItem={({ item, index }) => {
        //push your code
    })
    />
<ScrollView>

Answer 2

我遇到了一个问题列表（几百个），问题不那么长，我通过遍历列表将它们映射到多个视图（每个视图一个接一个，另一个接一个）来克服了这个问题。使用flex）

如果您的列表不太长，您也可以使用# EXECUTIVE SUMMARY Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... ... # TECHNICAL REVIEW Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... ... ## BIOMEDICAL NATURAL LANGUAGE PROCESSING Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... ... # PROPOSED WORK Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...并且它支持ScrollView

Answer 3

我用简单的逻辑看

<ScrollView
    horizontal
    showsHorizontalScrollIndicator={false}
    contentContainerStyle={{
        justifyContent: 'center',
        paddingHorizontal: 20,
        paddingBottom: 70,
    }}>
    <View>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
            {this.state.interest.length
                ? this.state.interest.map((d, i) => {
                    if (i % 2 == 0) {
                        return null;
                    }
                    return (
                        <Intrest
                            style={{
                                height: 40,
                                paddingHorizontal: 20,
                                alignItems: 'center',
                                justifyContent: 'center',
                                borderRadius: 30,
                                margin: 2.5,
                            }}
                            key={i}
                            data={d}
                            add={data => {
                                this._handleAddtoSelection(data);
                            }}
                            remove={data => {
                                this._handleRemoveFromSelection(data);
                            }}
                            active={this._isSelectedTopic(d)}
                        />
                    );
                })
                : null}
        </View>
        <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
            {this.state.interest.length
                ? this.state.interest.map((d, i) => {
                    if (i % 2 != 0) {
                        return null;
                    }
                    return (
                        <Intrest
                            style={{
                                height: 40,
                                paddingHorizontal: 20,
                                alignItems: 'center',
                                justifyContent: 'center',
                                borderRadius: 30,
                                margin: 2.5,
                            }}
                            key={i}
                            data={d}
                            add={data => {
                                this._handleAddtoSelection(data);
                            }}
                            remove={data => {
                                this._handleRemoveFromSelection(data);
                            }}
                            active={this._isSelectedTopic(d)}
                        />
                    );
                })
                : null}
        </View>
    </View>
</ScrollView>

输出：Output

Answer 4

增强第一个答案，这就是我所做的：

const listData = props.data ?? [];
const numColumns = Math.ceil(listData.length / 2);
        <ScrollView
          horizontal
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={{ paddingVertical: 20 }}>
          <FlatList
            scrollEnabled={false}
            contentContainerStyle={{
              alignSelf: 'flex-start',
            }}
            numColumns={numColumns}
            showsVerticalScrollIndicator={false}
            showsHorizontalScrollIndicator={false}
            data={listData}
            renderItem={renderItem}
          />
        </ScrollView>

React具有多行的Native水平FlatList

4 个答案: