Question

这个带有单个堆栈导航器的非常基本的应用程序在 Web 上的行为与预期不符。在 iOS/Android 上，标题保持原位，屏幕在标题下滚动。对于网络，标题不会固定在顶部。看看这个小吃https://snack.expo.io/@tositsa/nested-stacks-fixed-header-issue-2

我认为这可能是 react-native-navigation 或 react-native-web 中的一个错误，但我很想看看是否有某种解决方法。

Answer 1

当我尝试在 Expo React Native for Web 上使用 React Navigation 5 呈现自定义标头组件时遇到了类似的问题。我能够通过将定位设置为“固定”来解决这个问题，就像这样的网络。这应该适用于使用自定义标头组件，但我不确定您是否可以对默认标头组件应用相同的解决方案。

在堆栈/屏幕配置中

// ...

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{
    header: () => <MyCustomHeader />
  }}
/>

在要由 RN5 渲染的 Custom Header 组件中

// ...

const MyCustomHeader = ({ title }) => {
  return (
    <View style={styles.headerContainer}>
      <Text>{title}</Text>
    </View>
  );
}

const styles = {
  headerContainer: {
    ...Platform.select({
      web: {
        position: "fixed"
      }
    }),
    height: 60,
    width: '100%',
  }
}

Answer 2

最终找到了更好的解决方案（RNN 设计的方式）：

cardStyle: { flex: 1 } 在 screenOptions

也能解决问题。

反应原生导航堆栈导航器标头未固定在网络顶部

2 个答案: