react-native - 如何创建在 React Native 中滚动时消失的底部标签栏？

Question

我正在使用 React Navigation 在我的应用程序中创建选项卡导航器，我想要做的是在用户向下滚动时隐藏该选项卡栏，并在用户再次滚动到顶部时将其重新带回来，是否有任何跨平台解决方案？

reference app is Linkedin

Answer 1

我已经实现了显示/隐藏底部标签栏的组件。基于滚动方向参数 showTabBar设置。

 export default class ScrollTab extends React.Component {
  onScroll = (event) => {
    const { navigation } = this.props;
    const currentOffset = event.nativeEvent.contentOffset.y;
    const dif = currentOffset - (this.offset || 0);  

    if (dif < 0) {
      navigation.setParams({ showTabBar: true });
    } else {
      navigation.setParams({ showTabBar: false });
    }
    //console.log('dif=',dif);

    this.offset = currentOffset;
  }      

  render () {
    return (
      <ScrollView onScroll={(e) => this.onScroll(e)}>
        {this.props.children}
      </ScrollView>
    );
  }
}

然后在 navigationOptions可以更改 tabBarVisible属性取决于 showTabBar参数。

const isTabBarVisible = (navState) => {
  if (!navState) {
    return true;
  }
  let tabBarVisible = navState.routes[navState.index].params ? navState.routes[navState.index].params.showTabBar : true;
  return tabBarVisible;
}

const MessagesStack = createStackNavigator(
  {
    Messages: MessagesScreen,
  },
  config
);

MessagesStack.navigationOptions = ({ navigation }) => {
  return {
    tabBarLabel: 'Messages',
    tabBarVisible: isTabBarVisible(navigation.state)
  }
};