React Native无卡顿隐藏底部导航栏方案咨询

问题分析 #

你遇到的Error: Style property 'height' is not supported by native animated module，本质是React Navigation的tabBarStyle不支持直接接收Animated.Value作为样式属性，直接修改高度也会导致布局卡顿，因为没有正确触发平滑的布局动画。

解决方案 #

通过自定义动画化的底部导航栏组件，同时控制高度和透明度的动画，实现平滑的隐藏/显示效果，同时让页面内容自动填充底部空间。

完整代码示例 #

1. 自定义动画化的TabBar组件

import { Animated, View, TouchableOpacity, Text } from 'react-native';
import { BottomTabBarProps } from '@react-navigation/bottom-tabs';

// 创建动画化的TabBar组件
const AnimatedTabBar = Animated.createAnimatedComponent((props: BottomTabBarProps) => {
  return (
    <View style={{ backgroundColor: 'green' }}>
      {props.state.routes.map((route, index) => {
        const isFocused = props.state.index === index;
        return (
          <TouchableOpacity
            key={route.key}
            onPress={() => props.navigation.navigate(route.name)}
            style={{ flex: 1, paddingVertical: 16, alignItems: 'center' }}
          >
            <Text style={{ color: isFocused ? 'white' : '#ccc' }}>
              {route.name}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
});

2. 修改主App组件

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { SafeAreaView, Animated, useRef } from 'react-native';

const Tab = createBottomTabNavigator();

const App = () => {
  // 用useRef保存动画值，避免组件重渲染时重置
  const tabBarHeight = useRef(new Animated.Value(60)).current;
  const tabBarOpacity = useRef(new Animated.Value(1)).current;

  const hideBottomBar = () => {
    // 同时执行高度和透明度动画，提升视觉流畅度
    Animated.parallel([
      Animated.timing(tabBarHeight, {
        toValue: 0,
        duration: 300,
        useNativeDriver: false, // 高度动画必须关闭native driver
      }),
      Animated.timing(tabBarOpacity, {
        toValue: 0,
        duration: 200,
        useNativeDriver: true, // 透明度动画用native driver提升性能
      }),
    ]).start();
  };

  const showBottomBar = () => {
    Animated.parallel([
      Animated.timing(tabBarHeight, {
        toValue: 60,
        duration: 300,
        useNativeDriver: false,
      }),
      Animated.timing(tabBarOpacity, {
        toValue: 1,
        duration: 200,
        useNativeDriver: true,
      }),
    ]).start();
  };

  return (
    <NavigationContainer>
      <SafeAreaView style={{ flex: 1 }}>
        <Tab.Navigator
          screenOptions={{
            headerShown: false,
          }}
          // 自定义TabBar的容器，应用动画样式
          tabBar={(props) => (
            <Animated.View
              style={{
                height: tabBarHeight,
                opacity: tabBarOpacity,
                overflow: 'hidden', // 隐藏超出容器的内容
              }}
            >
              <AnimatedTabBar {...props} />
            </Animated.View>
          )}
        >
          <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>
      </SafeAreaView>
    </NavigationContainer>
  );
};

关键说明 #

• 动画分离：高度动画关闭native driver（因为布局属性不支持），透明度动画开启native driver提升性能，两者并行执行让过渡更自然。
• 自定义TabBar容器：通过tabBar属性传入动画化的容器，直接控制容器的高度和透明度，避免React Navigation样式系统的限制。
• WebView适配：确保SchoolScreen中的WebView样式设置为flex: 1，这样当TabBar高度变为0时，WebView会自动填充整个剩余空间，不会出现延迟卡顿。

内容的提问来源于stack exchange，提问作者LoadJulz