React Native中使用百分比设置图片宽度失效问题求助

问题根源很明确：React Native里百分比宽度的计算依赖父组件有明确的尺寸约束，而横向ScrollView的内容容器默认是由子元素宽度撑开的，没有固定的参考宽度，直接给图片设35%宽度会因为父容器宽度不确定，计算结果为0，导致图片消失。

下面给你两个实用的解决方法：

方法1：用useWindowDimensions动态计算（推荐） #

这个React Native内置钩子会自动监听屏幕尺寸变化（比如旋转），比Dimensions更灵活：

import { ScrollView, Image, useWindowDimensions } from 'react-native';

export default function YourComponent() {
  const { width: screenWidth } = useWindowDimensions();
  // 计算35%屏幕宽度对应的像素值
  const imageWidth = screenWidth * 0.35;

  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
      {/* 用计算后的像素值代替百分比 */}
      <Image
        source={require('./your-image-0.png')}
        style={{ width: imageWidth, height: 200, resizeMode: 'cover' }}
      />
      <Image
        source={require('./your-image-1.png')}
        style={{ width: 350, height: 200, resizeMode: 'cover', marginLeft: 10 }}
      />
      <Image
        source={require('./your-image-2.png')}
        style={{ width: 350, height: 200, resizeMode: 'cover', marginLeft: 10 }}
      />
    </ScrollView>
  );
}

方法2：用Dimensions获取固定屏幕宽度 #

如果你的场景不需要适配屏幕旋转，也可以直接用Dimensions：

import { ScrollView, Image, Dimensions } from 'react-native';

// 获取屏幕宽度
const screenWidth = Dimensions.get('window').width;
const imageWidth = screenWidth * 0.35;

export default function YourComponent() {
  return (
    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
      <Image
        source={require('./your-image-0.png')}
        style={{ width: imageWidth, height: 200, resizeMode: 'cover' }}
      />
      {/* 其他图片保持不变 */}
      <Image
        source={require('./your-image-1.png')}
        style={{ width: 350, height: 200, resizeMode: 'cover', marginLeft: 10 }}
      />
    </ScrollView>
  );
}

为什么给父组件设100%宽度没用？ #

横向ScrollView本身的宽度默认是屏幕宽度，但它的**内容容器（contentContainer）**是横向滚动的，宽度由所有子元素的总宽度决定，没有固定的约束值。所以你给父组件设100%，只是让ScrollView占满屏幕宽度，但子元素的百分比宽度还是找不到有效的参考值，自然无法正常显示。

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