在 React Native 中隐藏 createBottomTabNavigator 选项卡栏

Question

In React Native 0.62 is it possible to hide on scroll the tabbar created with createBottomTabNavigator from reactnavigation.org ?

I'm curious if it's possible in a similar way that LinkedIn has, when you scroll down the page the tabbar disappears and when you scroll back up it reappears. Or it's only possible with a custom tabbar?

Answer 1

yes, it is possible to hide bottomtabbar.

it is possible with both custom and default tab bar

we can use tabBarVisible option to hide and show. we can use onScroll and inside on scroll we can use dispatch to show and hide

here is demo: https://snack.expo.io/@nomi9995/tab-navigation-%7C-bottom-tab-hide

const getTabBarVisible = (route) => {
  const params = route.params;
  if (params) {
    if (params.tabBarVisible === false) {
      return false;
    }
  }
  return true;
};

<Tab.Screen
          name="Home"
          component={HomeScreen}
          options={({ route }) => ({
            tabBarVisible: getTabBarVisible(route),
         })}
 />

Full Code:

  import * as React from "react";
  import { Text, View, ScrollView, Dimensions } from "react-native";
  import { NavigationContainer } from "@react-navigation/native";
  import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
  import { CommonActions } from "@react-navigation/native";

  const height = Dimensions.get("window").height;
  const width = Dimensions.get("window").width;

  class HomeScreen extends React.Component {
    offset = 0;
    onScrollHandler = (e) => {
      const currentOffset = e.nativeEvent.contentOffset.y;
      var direction = currentOffset > this.offset ? "down" : "up";
      this.offset = currentOffset;
      if (direction === "down") {
        this.props.navigation.dispatch(
          CommonActions.setParams({
            tabBarVisible: false,
          })
        );
      } else {
        this.props.navigation.dispatch(
          CommonActions.setParams({
            tabBarVisible: true,
          })
        );
      }
    };
    render() {
      return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <ScrollView
            showsVerticalScrollIndicator={false}
            scrollEventThrottle={16}
            onScroll={this.onScrollHandler}
          >
            <View
              style={{
                alignItems: "center",
                height: height * 2,
                width: width,
                backgroundColor: "red",
              }}
            >
              <View
                style={{
                  backgroundColor: "blue",
                  width: 100,
                  height: height * 2,
                }}
              />
            </View>
          </ScrollView>
        </View>
      );
    }
  }

  function SettingsScreen() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Settings!</Text>
      </View>
    );
  }

  const Tab = createBottomTabNavigator();

  const getTabBarVisible = (route) => {
    const params = route.params;
    if (params) {
      if (params.tabBarVisible === false) {
        return false;
      }
    }
    return true;
  };

  class MyTabs extends React.Component {
    render() {
      return (
        <Tab.Navigator>
          <Tab.Screen
            name="Home"
            component={HomeScreen}
            options={({ route }) => ({
              tabBarVisible: getTabBarVisible(route),
            })}
          />
          <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
      );
    }
  }

  export default function App() {
    return (
      <NavigationContainer>
        <MyTabs />
      </NavigationContainer>
    );
  }

Answer 2

Any change this might work on a stack navigator nested inside a tab navigator. I did what you proposed, and it hides the navbar, but it leaves an empty space in it's place ( on IOS, on Android it seems to work ). Tha empty space is fixed, so the rest of the page content goes under it.

Answer 3

In the latest React navigation tabBarVisible prop is not available. It's good if you animat the height of bottom Bar Onscroll event like this.

  var currentPos = 0;
  const onScroll = (event: any) => {
    const currentOffset = event.nativeEvent.contentOffset.y;

    const dif = currentOffset - currentPos;
    if (Math.abs(dif) < 3) {
    } else if (dif < 0) {
      Animated.timing(height, {
        toValue: 1,
        duration: 100,
        useNativeDriver: false,
      }).start()
    } else {
      Animated.timing(height, {
        toValue: 0,
        duration: 100,
        useNativeDriver: false,
      }).start()
    }
    currentPos = currentOffset;
  }; 

In the end, Interpolate Height like this inside Animated.View
height.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 60],
    extrapolate: Extrapolate.CLAMP,
})
 
 

Answer 4

 <Tab.Navigator
        screenOptions={{
            headerShown: false,
            tabBarHideOnKeyboard: true,
            showLabel: false,
            tabBarStyle: {
                elevation: 0,
                backgroundColor: '#F1F1F1',
                height: 70,
                /*display: 'none',*/ <-- you ca
                ...styles.shadow
            },
            tabBarLabelStyle: {
                display: 'none'
            },

        }}

    >