React Native FlatList 水平模式根本不起作用 [英] React Native FlatList horizontal mode not working at all
问题描述
我正在使用 React Native 0.44.0 并且我正在尝试使用卡片样式布局制作水平 FlatList.无论出于何种原因,无论我做什么,我都无法激活水平模式.它似乎总是垂直渲染...
I am using React Native 0.44.0 and I am attempting to make a horizontal FlatList using a card style layout. For whatever reason, no matter what I do, I cannot get the horizontal mode to activate. It always seems to render vertically...
这是我使用的代码:
<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
东西.
I can post the code for my component renders but none of them use anything but padding and margins for style, so flex
or flexDirection
stuff.
推荐答案
对于任何从 Google 搜索而来的人,我都想通了.事实证明,如果您希望能够动态地从水平变为垂直,反之亦然,则无法呈现自己的滚动组件.所以,如果我使用我之前的代码并注释掉对 renderScrollComponent
的调用,那么它就可以工作......就像这样:
For anyone coming in off of a Google search, I figured it out. Turns out you can't render your own scroll component if you want to be able to dynamically change from horizontal to vertical or vice versa. So, if I take my previous code and comment out the call to renderScrollComponent
, then it works... like so:
<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 来计算我的项目大小,如下所示:
Also I can dynamically update the positioning like so. I add a function level const for calculating my item size like this:
const ITEM_SIZE = this.state.isHorizontal ?ITEM_HEIGHT : this.props.width;
然后我更新了我的 getItemLayout
函数,如下所示:
Then I updated my getItemLayout
function to look like this:
getItemLayout={(data, index) =>({ index, length: ITEM_SIZE, offset: ITEM_SIZE * index })}/>
这篇关于React Native FlatList 水平模式根本不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!