隐藏底部栏，没有调整大小延迟

Question

我想在代码触发指定操作时隐藏底部导航栏。一切似乎都按预期工作，除了我目前的版本，用户界面有点滞后，一秒钟后屏幕扩大并占据了底部导航栏的空间。我认为最好的方法是能够在隐藏时动态设置底部导航栏的高度，例如 0 到 60 的高度。但它不允许我对底部栏的高度进行动画处理，原因是：

错误：本机动画不支持样式属性“高度” 模块

您有什么想法如何在屏幕上平滑地隐藏和显示底部导航栏吗？我想在屏幕中包含一个网络视图，如果打开子域，底部导航栏应该隐藏。这是我当前处理这个不起作用的问题的代码：

    const App = () => {
  const [tabBarHeight] = useState(new Animated.Value(60)); // Initial height of the tab bar

  const hideBottomBar = () => {
    console.log('hideBottomBar');
    Animated.timing(tabBarHeight, {
      toValue: 0,
      duration: 300,
      useNativeDriver: false
    }).start();
  };

  const showBottomBar = () => {
    console.log('showBottomBar');
    Animated.timing(tabBarHeight, {
      toValue: 60, // Adjust this value to the height you need
      duration: 300,
      useNativeDriver: false,
    }).start();
  };

  return (
    <NavigationContainer>
      <SafeAreaView style={{ flex: 1 }}>
        <View style={{ flex: 1 }}>
        <Animated.View style={{ flex: 1 }}>
            <Tab.Navigator
              screenOptions={{
                headerShown: false,
                tabBarStyle: { backgroundColor: "green", height: tabBarHeight},
              }}
            >
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Business" component={BusinessScreen} />
            <Tab.Screen name="School">
              {() => <SchoolScreen hide={hideBottomBar} show={showBottomBar} />}
            </Tab.Screen>
          </Tab.Navigator>
          </Animated.View>
        </View>
      </SafeAreaView>
    </NavigationContainer>
  );
};

我正在 React Native 0.74.2 上运行

Answer 1

您还可以使用自定义高度，而不是使用 Tab.navigator 的高度

 const renderTabBar = (props: React.JSX.IntrinsicAttributes & BottomTabBarProps & { style?: false | RegisteredStyle<ViewStyle> | Animated.Value | Animated.WithAnimatedObject<ViewStyle> | Animated.AnimatedInterpolation<string | number> | Animated.WithAnimatedArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle> | RecursiveArray<ViewStyle | Falsy | RegisteredStyle<ViewStyle>> | readonly (ViewStyle | Falsy | RegisteredStyle<ViewStyle>)[]> | null | undefined; }) => (
<Animated.View style={[styles.tabBar, { transform: [{ translateY }] }]}>
  <BottomTabBar {...props} />
</Animated.View>);

您可以在 tab.navigator 中使用此选项卡栏

tabBar={(props) => renderTabBar(props)}

通过使用 Animated.View 的 Transform 属性，您可以使用这两种方法轻松地对选项卡栏进行动画隐藏或显示：

const hideBottomBar = () => {
Animated.timing(translateY, {
  toValue: 100, // adjust this value to the height of the tab bar
  duration: 300,
  useNativeDriver: true,
}).start();}; 

和

const showBottomBar = () => {
Animated.timing(translateY, {
  toValue: 0,
  duration: 300,
  useNativeDriver: true,
}).start();};