react-native - 在 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>
    );
  }