react-native - scrollView中的滚动选项卡,内容为flatlist且有header,如何解决滚动冲突
问题描述
我遇到一个问题,页面上有一个标题,一个滚动选项卡,主要内容是两个FlatList。我使用动画,让标题在单个视图中并使用绝对布局。这个解决方案有个问题,FlatList不能滚动,只能滚动scrollView。当数据增长时,性能很差。
t 它是解决方案代码:
<Animated.View style={{
width: "100%",
position: "absolute",
transform: [{
translateY: this.headerY
}],
backgroundColor:'red',
top: 50,
elevation: 0,
flex: 1,
zIndex: this.state.pullToRefresh ? -1 : 1,
}}>
<HeaderView />
</Animated.View>
<Animated.ScrollView
scrollEventThrottle={1}
bounces={false}
showsVerticalScrollIndicator={false}
style={{ zIndex: 0, height: DeviceUtils.deviceHeight, elevation: -1,
overflow: 'scroll' }}
contentContainerStyle={{ paddingTop: NAVBAR_HEIGHT }}
onScroll={
Animated.event(
[{ nativeEvent: { contentOffset: { y: this.scroll } } }],
{ useNativeDriver: true },
)
}
overScrollMode="never"
/>}
>
<Tabs
initialPage={0}
renderTabBar={(props) =>
<Animated.View
style={[{
transform: [{ translateY: tabY }],
zIndex: 1,
width: "100%",
}]}>
<ScrollableTab
{...props}
style={{ backgroundColor: '#e5e5e5'}}
underlineStyle={{
backgroundColor: "#2a82e4",
}}
>
</ScrollableTab>
</Animated.View>
}
>
<Tab heading={"one"}
<FlatList key={'one'}/>
</Tab>
<Tab heading={"two"}
<FlatList key={'two'}/>
</Tab>
</Tabs>
UI 使用 nativebase UI 库
解决方案
最后,我将表头放在 FlatList ListHeader 中。并根据item index渲染标签,当index为0时,渲染标签。
<FlatList
data={DATA}
renderItem={this.renderItem}
keyExtractor={item => item.id}
ListHeaderComponent={header}
extraData={selected}
/>
....
renderItem = (item,index) => {
if(index == 0) {
return this.renderTabs()
} else {
return <Cell data=item/>
}
}
...
renderTabs = () => {
<View>
<Tab/> // the view for tabs, we have to handle the tab change by ourself
<Tab/>
</View
}
I use two data array to save for different tabs.
推荐阅读
- javascript - 使用 if 函数添加 javascript 变量
- drools - 问题:你能在 Drools 中对 list 类型的全局变量执行包含操作吗
- javascript - JS 如何从 URL 获取 PDF 并保存到变量
- javascript - 当我使用“useHTML:true”时,折线图的 Highcharts v9 图例项未居中对齐
- wordpress - 可从前端存档下载的 Woocommerce 隐藏不起作用
- r - 有没有办法在ggplot2的轴上调整一天中的时间顺序?
- bash - 别名中的导出在 Bash 中不起作用
- javascript - Javascript - 避免模块循环依赖(组织问题?)
- mysql - 这个自内连接查询是如何工作的?
- c# - Xamarin Mac FFmpeg 启动路径无法访问