React Native如何设置窗口视图最大高度？解决滚动条与动画异常

先理清楚现有代码的问题：原工具类混用了Web端的window.onresize和location.reload()，这在React Native里完全不适用，而且刷新页面的操作完全没必要，只会加重卡顿。

下面给你两种可行的解决方法，优先推荐第二种更简洁的方案：

步骤1：先修复尺寸工具类的错误逻辑 #

找到你的尺寸工具文件（比如叫dimensions.js），替换成以下代码：

import { Dimensions } from 'react-native';

let width = Math.round(Dimensions.get('window').width);
let height = Math.round(Dimensions.get('window').height);
let mobile = width < 400;

// 用React Native原生的尺寸监听事件
const updateDimensions = () => {
  width = Math.round(Dimensions.get('window').width);
  height = Math.round(Dimensions.get('window').height);
  mobile = width < 400;
};

Dimensions.addEventListener('change', updateDimensions);

export { updateDimensions };

// 用getter确保每次获取的都是最新尺寸
export default {
  get window() {
    return { width, height };
  },
  get mobile() {
    return mobile;
  },
};

步骤2：解决页面元素溢出问题 #

方案A：用修复后的工具类设置容器高度 #

在新增页面的根容器样式中，直接绑定屏幕高度：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import dimensions from './path/to/dimensions'; // 替换成你的工具文件实际路径

const NewPage = () => {
  return (
    <View style={styles.container}>
      {/* 这里放你的页面内容 */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: dimensions.window.height,
    overflow: 'hidden', // 强制隐藏溢出内容，避免出现滚动条
  },
});

export default NewPage;

方案B：用flex布局占满屏幕（推荐） #

React Native里用flex:1是占满父容器可用空间的标准写法，比硬编码高度更灵活，适配横竖屏切换：

import React from 'react';
import { View, StyleSheet } from 'react-native';

const NewPage = () => {
  return (
    <View style={styles.container}>
      {/* 这里放你的页面内容 */}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1, // 自动占满整个屏幕空间
    overflow: 'hidden',
  },
});

export default NewPage;

关于是否需要调用updateDimensions #

修复后的工具类会自动监听屏幕尺寸变化，不需要你手动调用这个函数。如果用方案B的flex布局，甚至不需要依赖这个尺寸工具类就能解决问题。

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