React 本机导航堆栈导航器 header 未固定在网络顶部

Question

这个只有一个堆栈导航器的非常基本的应用程序在网络上的表现不如预期。在 iOS/Android 上，header 保持原位，屏幕在 header 下方滚动。对于网络，header 不会固定在顶部。看到这个小吃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 呈现自定义 header 组件时遇到了类似的问题。我能够通过将定位设置为 'fixed' 来解决问题，只是为了像这样的网络。这应该适用于使用自定义 header 组件，但我不确定您是否可以对默认 header 组件应用相同的解决方案。

在stack/screen配置

// ...

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

在自定义Header组件中由RN5渲染

// ...

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

同样有效。

React 本机导航堆栈导航器 header 未固定在网络顶部

React native navigation stack navigator header not fixed at top for web

react-native

react-native-navigation

react-native-web