Реагировать на собственную вкладку прокрутки, содержимое которой является плоским списком, в представлении прокрутки, как разрешить конфликт прокрутки - PullRequest
Новая
       34

Реагировать на собственную вкладку прокрутки, содержимое которой является плоским списком, в представлении прокрутки, как разрешить конфликт прокрутки

0 голосов
/ 24 сентября 2019

Я сталкиваюсь с проблемой, на странице есть заголовок, вкладка прокрутки, содержимое которой состоит из двух плоских списков.

Во-первых, я использую анимацию, позволяю заголовку в одном представлении и использую абсолютный макет.у этого решения есть проблема, плоский список нельзя прокручивать, он только прокручивает scrollView.когда данные растут, эффект плохой.

Во-вторых, я использую flatlist listheaderComponent, и реквизиты stickHeader понимают, что вкладка делает фолк-шоу.эффект прокрутки пейджерного представления потерян.во-первых, это первый код решения. 

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

второе решение: 

      <FlatList
            data={this.state.sourceData}
            ListHeaderComponent={<DocumentBoxList />}
            renderItem={this._renderItem}
            stickyHeaderIndices={[1]}
            {...rest}
        />

      // the item 0 fixed
     _renderItem({item,index}){
        if(index == 0) {
          return  this._renderHeader()
        } else {
        return (
            <Item
                id={item.ID}
                item={item}
            />
     }

пользовательский интерфейс использует собственную базовую библиотеку пользовательского интерфейса

...