Вкладки с прокруткой анимированного заголовка - React native

Question

Я следую учебному пособию по ссылке: https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e.Однако я не могу понять, как добавить к нему вкладки, чтобы заголовки вкладок фиксировались вверх при прокрутке вверх.Может кто-нибудь подсказать, пожалуйста, как этого добиться?

Answer 1

Мне удалось добиться этого с помощью ScrollableTab и Tab в библиотеке native-base.

Код выглядит следующим образом

<Tabs
            prerenderingSiblingsNumber={3}
            onChangeTab={({i}) => {
              this.setState({height: this.heights[i], activeTab: i})
            }}
            renderTabBar={(props) => <Animated.View
              style={{transform: [{translateY: tabY}], zIndex: 1, width: "100%", backgroundColor: "white", paddingTop : HEADER_MAX_HEIGHT }}>
              <ScrollableTab {...props}
                             renderTab={(name, page, active, onPress, onLayout) => (
                               <TouchableOpacity key={page}
                                                 onPress={() => onPress(page)}
                                                 onLayout={onLayout}
                                                 activeOpacity={0.4}>
                                 <Animated.View
                                   style={{
                                     flex: 1,
                                     height: 100,
                                     backgroundColor: tabBg
                                   }}>
                                   <TabHeading scrollable
                                               style={{
                                                 backgroundColor: "transparent",
                                                 width: Dimensions.get('window').width / 2
                                               }}
                                               active={active}>
                                     <Animated.Text style={{
                                       fontWeight: active ? "bold" : "normal",
                                       color: 'black',
                                       padding: 10,
                                       fontSize: active ? 20:18
                                     }}>
                                       {name}
                                     </Animated.Text>
                                   </TabHeading>
                                 </Animated.View>
                               </TouchableOpacity>
                             )}
                             underlineStyle={{backgroundColor: 'black'}}/>
            </Animated.View>
            }>
            <Tab heading="Tab 1">
              {this.tabContent(30, 0)}
            </Tab>
            <Tab heading="Tab 2">
              {this.tabContent(15, 1)}
            </Tab>
          </Tabs>