React Native-使用滚动动画底部标签栏

Question

In my react native project, I want bottom tabBar to be shown on screen, as you scroll upwards with your finger, say 200 offset y, the tabBar hides with animation, and when you scroll down, again, say 200 offset y, it shows the tabBar again.

I am using createBottomTabNavigator. I am able to show/hide bottom bar without animation.

I have tried

https://github.com/react-navigation/react-navigation/issues/888#issuecomment-299600368

https://github.com/react-navigation/react-navigation/issues/958

Below is my code

navigationOptions: ({ navigation }) => {
        const params = navigation.state.params;
        return {
          tabBarVisible: params && params.tabBarVisible,
          animationEnabled: true,
        }
      },

How can I animate the bottom bar as user scrolls the list?

Thanks in advance.

Answer 1

If you want a bottom navigation with animation, you can use the createMaterialTopTabNavigator and simply set the tabBarPosition.

For detail information about createMaterialTopTabNavigator