在 React Native 中隐藏 createBottomTabNavigator Tabbar

Question

在 React Native 0.62 中是否可以在滚动时从 reactnavigation.org 中隐藏使用 createBottomTabNavigator 创建的标签栏？

我很好奇是否可以采用与 LinkedIn 类似的方式，当您向下滚动页面时，标签栏会消失，而当您向上滚动时，它会重新出现。或者只有自定义标签栏才有可能？

Answer 1

是的，可以隐藏 bottomtabbar。

自定义和默认标签栏都可以

我们可以使用tabBarVisible option to hide and show. we can use onScroll and inside on scroll we can use dispatch来显示和隐藏

这里是演示：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),
         })}
 />

完整代码：

  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

这可能适用于嵌套在选项卡导航器内的堆栈导航器的任何更改。我按照你的建议做了，它隐藏了导航栏，但它在它的位置留下了一个空的 space（在 IOS 上，在 Android 上似乎有效）。空白 space 已修复，因此页面的其余内容都在其下方。

Answer 3

 <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'
            },

        }}

    >

Answer 4

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,
})

在 React Native 中隐藏 createBottomTabNavigator Tabbar

Hide createBottomTabNavigator Tabbar in React Native

react-native

react-navigation

react-navigation-bottom-tab

react-navigation-v5

完整代码：