为什么这个反应本机网络应用程序过度滚动？

Question

此应用程序中存在导致过度滚动（滚动超出应用程序边界）功能的错误。它不会在您每次加载页面时发生，但它偶尔会在每个页面上发生。这是一个使用 '@react-navigation/stack' 和 '@react-navigation/native' 的网络应用程序。该应用程序针对 1080p 显示器进行了优化，在较小的分辨率下更常出现，但在 1080p 上仍然会出现。这就是问题的样子。

这是应用程序典型页面上使用的样式示例。

const style = StyleSheet.create({
  masterContainer: {
    flex: 1,
  },
  mainContainer: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: theme.SHADE_MID_HIGH,
  },
  header: {
    marginTop: 40,
    marginBottom: 40,
    fontSize: 35,
    fontFamily: 'Verdana',
  },
  eventList: {
    marginBottom: 40,
  },
  eventTile: {
    margin: 10,
  },
  addEventButton: {
    height: 50,
    width: 300,
    marginBottom: 40,
    borderWidth: 1,
    borderRadius: 15,
    backgroundColor: theme.SECONDARY,
    borderColor: theme.SECONDARY_DARK,
    alignItems: 'center',
    justifyContent: 'center',
  },
  newEventText: {
    fontSize: 30,
    color: theme.SHADE_HIGH,
  },
  bottomBar: {
    width: '100%',
    height: 200,
  },
  attributionBar: {
    height: 50,
    flexDirection: 'row',
  },
  attribution: {
    fontSize: 20,
    color: theme.SHADE_MID,
    alignSelf: 'center',
  },
});

Answer 1

如果您正在使用 monorepo 模式并且您的项目中包含 cra-web，请转到 index.css 文件并将溢出设置为隐藏

html,
body,
#root,
#root > div {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

这可能对您有所帮助

Answer 2

问题出在 React Native Web 的导航动画上。他们目前仍处于测试阶段。删除它们后，滚动问题停止了。

为什么这个反应本机网络应用程序过度滚动？

Why is this react native web app over-scrolling?

javascript

reactjs

react-native

react-navigation

react-native-web