React Native中如何让组件适配横竖屏屏幕宽度？

嘿，这个问题我之前也碰到过！用Dimensions.get('window').width确实会有这个坑——它只会在组件初始化时获取一次屏幕宽度，横竖屏切换后不会自动刷新数值，所以组件就跟不上屏幕宽度变化了。给你几个靠谱的解决办法，按推荐程度排序：

React Native从0.62版本开始提供了useWindowDimensions这个专门的Hook，它会自动监听窗口尺寸变化，实时返回最新的宽高值，用法超简单：

import { useWindowDimensions } from 'react-native';

function YourComponent() {
  const { width } = useWindowDimensions();

  return (
    <View style={{ width: width, backgroundColor: 'red' }}>
      {/* 你的组件内容 */}
    </View>
  );
}

不管横竖屏怎么切换，width都会自动同步最新的屏幕宽度，组件自然就能始终铺满屏幕了。

其实很多时候根本不需要手动设置宽度，直接用Flex布局就能让组件自动撑满屏幕宽度。比如给父容器设置flex: 1，子组件默认就会占满父容器的宽度：

function YourComponent() {
  return (
    <View style={{ flex: 1 }}>
      {/* 这个子View会自动铺满屏幕宽度 */}
      <View style={{ backgroundColor: 'blue' }}>
        {/* 内容 */}
      </View>
    </View>
  );
}

如果是单个独立组件，直接给它设置width: '100%'或者flex: 1也能达到效果，这种方式最简洁，完全不需要额外的监听逻辑。

如果你用的是较旧版本的React Native，没有useWindowDimensions，可以手动监听Dimensions的变化事件来更新宽度：

import { Dimensions, View, useEffect, useState } from 'react-native';

function YourComponent() {
  const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);

  useEffect(() => {
    const updateDimensions = () => {
      const { width } = Dimensions.get('window');
      setScreenWidth(width);
    };

    // 监听尺寸变化事件
    Dimensions.addEventListener('change', updateDimensions);

    // 组件卸载时记得移除监听，避免内存泄漏
    return () => {
      Dimensions.removeEventListener('change', updateDimensions);
    };
  }, []);

  return (
    <View style={{ width: screenWidth, backgroundColor: 'green' }}>
      {/* 内容 */}
    </View>
  );
}

这个方法需要自己管理监听的添加和移除，相对麻烦一点，但兼容性更好。

最后还要确认一下：你的组件的父容器有没有设置固定宽度或者限制了宽度？如果父容器本身宽度不够，即使你给子组件设置了屏幕宽度，也会被父容器的限制挡住哦。

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