React Native Navigation网页端头部未固定，如何实现滚动时置顶？

方案1：调整Stack Navigator的screenOptions配置 #

在Stack Navigator的screenOptions中显式设置头部固定样式，同时给页面内容留出顶部内边距避免遮挡：

import { createStackNavigator } from '@react-navigation/stack';
import { Platform } from 'react-native';

const Stack = createStackNavigator();

function AppNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          zIndex: 1000,
        },
        cardStyle: {
          paddingTop: Platform.OS === 'web' ? 60 : 0,
        },
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      {/* 其他页面路由 */}
    </Stack.Navigator>
  );
}

方案2：适配内部滚动容器（ScrollView/FlatList） #

如果页面使用了ScrollView或FlatList，直接给滚动容器添加顶部内边距适配头部高度：

import { ScrollView, Platform } from 'react-native';

function HomeScreen() {
  const headerHeight = 60;
  return (
    <ScrollView
      contentContainerStyle={{
        paddingTop: Platform.OS === 'web' ? headerHeight : 0,
      }}
    >
      {/* 页面内容 */}
    </ScrollView>
  );
}

FlatList的处理方式完全一致，同样设置contentContainerStyle的paddingTop即可。

方案3：检查根组件布局 #

确保根组件的样式不会挤压导航容器，保证其占满整个视口：

import { View, StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <View style={styles.container}>
      <NavigationContainer>
        {/* 你的导航器 */}
      </NavigationContainer>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
  },
});

额外注意 #

• 若使用自定义头部组件，需手动给自定义头部设置position: 'fixed'、top: 0、left: 0、right: 0以及足够高的zIndex值。
• Expo 47对应React Native 0.70.x版本，RN Web对fixed定位的支持已成熟，无需额外引入polyfill。

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