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

对于那些来自谷歌搜索的人，我想通了。如果您希望能够动态地从水平变为垂直，反之亦然，则无法渲染自己的滚动组件。所以，如果我使用我以前的代码并注释掉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来计算我的项目大小，如下所示：

const ITEM_SIZE = this.state.isHorizontal ? ITEM_HEIGHT : this.props.width;

然后我将getItemLayout函数更新为：

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

Answer 2

尝试使用horizontal inside flatlist标签，而不是值，它对我有用：D

<FlatList
    horizontal
    data={tab_ad}
    renderItem={(item) => this.renderItem(item.item)}
    keyExtractor={(item, index) => index}
    ={this.state}
/>

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

2 个答案: