reactjs - 我们如何在本机反应中隐藏向下滚动事件的标签栏

Question

我正在使用 react-native-tab-view 模块在我的应用程序中实现选项卡。标签工作正常，但我希望当用户向下滚动列表时，标签栏应该用动画隐藏。

我正在使用的模块链接，即 https://github.com/react-native-community/react-native-tab-view

这是我的代码：-

import React, { Component } from 'react';
import { View, Text, ScrollView, ActivityIndicator } from 'react-native';
import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';

import styles from './Styles';

// First tab component
const FirstRoute = () => (
  <ScrollView>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
    <Text>1</Text>
  </ScrollView>
);

export default class BookingDetail extends Component {

  // default states
  state = {
    index: 0,
    routes: [
      { key: '1', title: 'Booking Detail' },
      { key: '2', title: 'Checklist' }
    ],
  };

  // handeler for index change
  _handleIndexChange = index => this.setState({ index });

  // handler for render header
  _renderHeader = props => <TabBar {...props} indicatorStyle={styles.indicatorStyle} tabStyle={styles.tabStyle} style={styles.tabBarContainer} labelStyle={styles.labelStyle} />;

  // render each scene
  _renderScene = SceneMap({
    '1': FirstRoute,
    '2': FirstRoute
  });

  render() {
    return (
      <TabViewAnimated
        style={styles.container}
        navigationState={this.state}
        renderScene={this._renderScene}
        renderHeader={this._renderHeader}
        onIndexChange={this._handleIndexChange}
      />
    );
  }
}