android - 带有滚动动画标题的选项卡 - React native

Question

我正在按照链接中的教程进行操作:https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e . 但是，我似乎无法理解如何向其中添加选项卡，以便选项卡标题在向上滚动时固定到顶部。谁能建议如何实现这一目标？

Answer 1

我能够使用 native 库中的 ScrollableTab 和 Tab 来实现它。

代码是这样的

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