在 React Native 中隐藏 createBottomTabNavigator 选项卡栏

Question

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

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

Answer 1

是的，可以隐藏底部标签栏。

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

我们可以使用tabBarVisible 选项来隐藏和显示。我们可以使用 onScroll 和 inside on scroll 我们可以使用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

这可能适用于嵌套在选项卡导航器内的堆栈导航器。 我按照你的建议做了，它隐藏了导航栏，但它在它的位置留下了一个空白空间（在 IOS 上，在 Android 上它似乎工作）。空白空间是固定的，所以页面的其余内容都在它下面。

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

        }}

    >