javascript - React Native FlatList 水平模式根本不起作用

Question

我正在使用 React Native 0.44.0，我正在尝试使用卡片样式布局制作水平 FlatList。无论出于何种原因，无论我做什么，我都无法激活水平模式。它似乎总是垂直呈现...

这是我使用的代码:

 <FlatList
    horizontal={true}
    data={this.state.newsFeed}
    refreshing={this.state.refreshing}
    ref={ref => {
        this.newsFeedListRef = ref;
    }}
    renderItem={this.renderNewsFeedRow.bind(this)}
    keyExtractor={(item, index) => `feed_${index}`}
    onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}
    renderScrollComponent={this.renderScrollComponent.bind(this)}
    ListHeaderComponent={this.renderListHeaderComponent.bind(this)}
    getItemLayout={(data, index) => ({
        index,
        length: ITEM_HEIGHT,
        offset: ITEM_HEIGHT * index + headerBarHeight
    })} />;

我可以发布我的组件渲染代码，但它们除了样式的填充和边距外没有使用任何东西，所以 flex 或 flexDirection 东西。

Answer 1

对于任何来自 Google 搜索的人，我都明白了。事实证明，如果您希望能够从水平动态更改为垂直或反之亦然，则无法呈现自己的滚动组件。所以，如果我使用我以前的代码并注释掉对 renderScrollComponent 的调用，那么它就可以工作......就像这样:

<FlatList
    data={this.state.newsFeed}
    refreshing={this.state.refreshing}
    horizontal={this.state.isHorizontal}
    ref={ref => { this.newsFeedListRef = ref; }}
    renderItem={this.renderNewsFeedRow.bind(this)}
    keyExtractor={(item, index) => `feed_${index}`}
    onRefresh={this.__handleNewsFeedOnRefresh.bind(this)}
    //renderScrollComponent={this.renderScrollComponent.bind(this)}
    ListHeaderComponent={this.renderListHeaderComponent.bind(this)}
    getItemLayout={(data, index) => ({ index, length: ITEM_HEIGHT, offset: (ITEM_HEIGHT * index) })} />

我也可以像这样动态更新定位。我添加了一个函数级常量来计算我的项目大小，如下所示:

const ITEM_SIZE = this.state.isHorizo​​ntal ? ITEM_HEIGHT : this.props.width;

然后我将我的 getItemLayout 函数更新为如下所示:

getItemLayout={(data, index) => ({ index, length: ITEM_SIZE, offset: ITEM_SIZE * index })}/>