React Native中启用headerTransparent后如何实现大标题折叠？

要同时实现大标题折叠和模糊导航栏背景，核心是避开headerTransparent对原生滚动联动的干扰，改用自定义导航栏的方式来实现模糊效果，同时保留大标题的原生折叠逻辑。

实现步骤与代码示例 #

这里以@react-navigation/native-stack为例，结合expo-blur（或react-native-blur）实现：

import { View, ScrollView, StyleSheet, StatusBar, TouchableOpacity, Text } from 'react-native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import { BlurView } from 'expo-blur';
import { useRef } from 'react';
import { useScrollToTop } from '@react-navigation/native';

const Stack = createNativeStackNavigator();

const HomeScreen = ({ navigation }) => {
  const scrollRef = useRef(null);
  useScrollToTop(scrollRef);

  return (
    <ScrollView
      ref={scrollRef}
      contentInsetAdjustmentBehavior="automatic"
      style={styles.scrollView}
    >
      {/* 列表占位内容 */}
      {Array.from({ length: 50 }).map((_, idx) => (
        <View key={idx} style={styles.listItem} />
      ))}
    </ScrollView>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerLargeTitle: true,
          // 自定义导航栏，替代headerTransparent
          header: ({ scene, navigation }) => {
            const { options } = scene.descriptor;
            const pageTitle = options.headerTitle ?? options.title ?? scene.route.name;

            return (
              <View style={styles.headerWrapper}>
                {/* 模糊背景层，置于最下方 */}
                <BlurView
                  tint="light"
                  intensity={80}
                  style={styles.blurBg}
                />
                {/* 导航栏内容区 */}
                <View style={styles.headerContent}>
                  {/* 返回按钮 */}
                  {scene.descriptor.options.headerBackVisible !== false && (
                    <TouchableOpacity
                      onPress={() => navigation.goBack()}
                      style={styles.backBtn}
                    >
                      <Text style={styles.backText}>←</Text>
                    </TouchableOpacity>
                  )}
                  {/* 大标题 */}
                  <Text style={styles.largeTitle}>{pageTitle}</Text>
                </View>
              </View>
            );
          },
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: '我的列表' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  headerWrapper: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    zIndex: 100,
    paddingTop: StatusBar.currentHeight,
    // 大标题模式下导航栏总高度：状态栏高度 + 120px
    height: StatusBar.currentHeight + 120,
  },
  blurBg: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  headerContent: {
    flex: 1,
    justifyContent: 'flex-end',
    paddingHorizontal: 16,
    paddingBottom: 16,
  },
  backBtn: {
    marginBottom: 8,
  },
  backText: {
    fontSize: 24,
  },
  largeTitle: {
    fontSize: 34,
    fontWeight: '700',
  },
  scrollView: {
    flex: 1,
    backgroundColor: '#fff',
  },
  listItem: {
    height: 50,
    margin: 12,
    borderRadius: 8,
    backgroundColor: '#f5f5f5',
  },
});

关键逻辑说明 #

1. 放弃headerTransparent：改用绝对定位的自定义导航栏，既让列表能在导航栏下方滚动，又保留React Navigation原生的大标题滚动联动逻辑。
2. 模糊背景嵌入导航栏：将BlurView作为导航栏的底层背景，滚动时列表内容会被模糊层遮挡，实现模糊效果。
3. 保持滚动联动：contentInsetAdjustmentBehavior="automatic"会自动适配导航栏高度，滚动时原生的大标题折叠动画不受影响，正常触发。
4. 适配状态栏：用StatusBar.currentHeight动态设置导航栏的顶部内边距，保证在不同设备上显示正常。

替代方案（若坚持用headerTransparent） #

如果一定要开启headerTransparent，需要手动监听滚动事件，通过动画API模拟大标题的折叠效果，同时调整模糊背景的透明度，但这种方式需要手动处理大量细节（比如滚动阈值、动画曲线），不如自定义导航栏简洁可靠。

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