Question

我正在使用React Navigation在我的应用程序中创建标签导航器，我想做的是当用户向下滚动时隐藏该标签栏，并在用户再次滚动至顶部时再次将其带回，是否有任何跨平台解决方案那个吗？

参考应用是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)
  }
};

Answer 2

编辑：答案见this Github问题。

旧答案：根据“滚动视图”中的滚动事件，可以将tabBarVisible导航选项设置为false。如果您希望获得动画平滑效果，可以考虑调整tabBar的高度或将tabBar移出屏幕。我还没有测试过任何一个，但这将是我要研究的第一件事。

如何创建底部标签栏，该标签栏在React Native中滚动消失？

2 个答案: