React Native UI宽高疑问：百分比与Dimensions.get('window')差异

为什么百分比设置会显示异常 #

你的books组件直接嵌套在ScrollView内部，而ScrollView本身没有固定的宽/高基准：

• ScrollView是滚动容器，它的高度默认由子元素的总高度决定，自身没有明确的高度值。当子组件（books）设置height: '100%'时，因为父级ScrollView没有确定的高度参考，React Native无法计算出具体的像素值，导致布局异常。
• 同理，宽度设置width: '100%'虽然偶尔能生效，但ScrollView的宽度计算也依赖父容器的明确尺寸，若父容器布局存在嵌套层级的flex不确定性，也会出现异常。

为什么Dimensions.get('window')能正常工作 #

Dimensions.get('window')会直接获取当前设备窗口的实际像素宽高，是一个具体的数值（比如375px/812px）。给books设置这个值时，组件有了明确的固定尺寸，布局引擎能直接渲染，所以显示正常。

但要注意：这个值默认是静态的——组件初始化时只会获取一次，当设备旋转、窗口尺寸变化（比如平板分屏、折叠屏展开）时，这个值不会自动更新，布局会失效。

优化方案 #

方案1：动态监听窗口尺寸变化（真正响应式） #

如果需要适配窗口尺寸变化，要监听Dimensions的change事件，实时更新组件尺寸：

import React, { useState, useEffect} from 'react';
// ...其他导入

export default function BooksRented() {
  const [windowSize, setWindowSize] = useState(Dimensions.get('window'));

  useEffect(() => {
    // 监听窗口尺寸变化
    const handleSizeChange = ({ window }) => {
      setWindowSize(window);
    };
    Dimensions.addEventListener('change', handleSizeChange);
    
    // 组件卸载时移除监听
    return () => Dimensions.removeEventListener('change', handleSizeChange);
  }, []);

  // 动态合并样式
  const dynamicBooksStyle = {
    ...styles.books,
    width: windowSize.width,
    height: windowSize.height
  };

  return (
    // ...原有JSX结构
    <View style={dynamicBooksStyle}>
      {/* ...book列表 */}
    </View>
    // ...
  );
}

// 保留原有styles，移除books里的width/height设置
const styles = StyleSheet.create({
  books:{
    flexDirection:'row',
    flexWrap:'wrap',
    justifyContent:'center',
    alignItems:'center',
    backgroundColor:'red',
    // 去掉原来的width/height
  },
  // ...其他样式
});

方案2：利用Flex布局替代固定尺寸 #

如果books不需要强制占满整个窗口，而是随内容自适应，同时保证布局正常，可以简化设置：

• 给ScrollView添加flex:1，让它占满父容器的可用空间
• 移除books的宽高设置，依赖flex布局自适应：

// 给ScrollView添加flex:1
<ScrollView style={{flex:1}}>
  {/* ...顶部的Rent Books标题栏 */}
  <View style={styles.books}>
    {/* ...book列表 */}
  </View>
</ScrollView>

// styles里的books去掉宽高设置
books:{
  flexDirection:'row',
  flexWrap:'wrap',
  justifyContent:'center',
  alignItems:'center',
  backgroundColor:'red',
}

这种方式更符合React Native的flex布局逻辑，避免依赖固定尺寸。

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