scrollView中的scroll tab，内容是flatlist，有header，如何解决滚动冲突 [英] the scroll tab in the scrollView, which content is flatlist and has a header, how to resolve scroll conflict

问题描述

我遇到一个问题，在页面上它有一个标题，一个滚动选项卡，主要内容是两个FlatList.我使用动画，让标题在一个视图中并使用绝对布局.这个解决方案有一个问题，FlatList不能滚动，它只能滚动scrollView.当数据增长时，性能很差.

I meet a problem, on the page it has a header, a scroll tab which the main content is two FlatList. I use animation, let the header in a single view and use absolute layout. this solution has a problem, the FlatList can not scroll, it only scrolls the scrollView. when the data grow, the performance is bad.

这是解决方案代码:

         <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 库

the UI use nativebase UI library

推荐答案

最后，我将标题放在 FlatList ListHeader 中.并根据项目索引渲染标签，当索引为0时，渲染标签.

Finally, I put the header in the FlatList ListHeader. and according to the item index to render the tabs, when the index is 0, render the tabs.

 <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.

这篇关于scrollView中的scroll tab，内容是flatlist，有header，如何解决滚动冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！