反应本机导航堆栈导航器标题未固定在网络顶部答案

【问题标题】：React native navigation stack navigator header not fixed at top for web反应本机导航堆栈导航器标题未固定在网络顶部
【发布时间】：2021-08-04 20:12:18
【问题描述】：

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

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

【问题讨论】：

标签： react-native react-native-navigation react-native-web

【解决方案1】：

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

在堆栈/屏幕配置中

// ...

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

在RN5要渲染的Custom Header Component中

// ...

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

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

【讨论】：

谢谢！非常适合我！

【解决方案2】：

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

cardStyle: { flex: 1 } in screenOptions

也可以。

【讨论】：