React Native FlatList 水平模式根本不起作用
React Native FlatList horizontal mode not working at all
我正在使用 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
})} />;
我可以 post 我的组件呈现的代码,但是 none 他们中的 none 使用除填充和边距之外的任何样式,所以 flex
或 flexDirection
东西。
对于任何来自 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 来计算我的项目大小,如下所示:
const ITEM_SIZE = this.state.isHorizontal ? ITEM_HEIGHT : this.props.width;
然后我将 getItemLayout
函数更新为如下所示:
getItemLayout={(data, index) => ({ index, length: ITEM_SIZE, offset: ITEM_SIZE * index })} />
尝试在 flatlist 标签内使用水平,而不是值,它对我有用:D
<FlatList
horizontal
data={tab_ad}
renderItem={(item) => this.renderItem(item.item)}
keyExtractor={(item, index) => index}
={this.state}
/>
我正在使用 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
})} />;
我可以 post 我的组件呈现的代码,但是 none 他们中的 none 使用除填充和边距之外的任何样式,所以 flex
或 flexDirection
东西。
对于任何来自 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 来计算我的项目大小,如下所示:
const ITEM_SIZE = this.state.isHorizontal ? ITEM_HEIGHT : this.props.width;
然后我将 getItemLayout
函数更新为如下所示:
getItemLayout={(data, index) => ({ index, length: ITEM_SIZE, offset: ITEM_SIZE * index })} />
尝试在 flatlist 标签内使用水平,而不是值,它对我有用:D
<FlatList
horizontal
data={tab_ad}
renderItem={(item) => this.renderItem(item.item)}
keyExtractor={(item, index) => index}
={this.state}
/>