横屏模式下ScrollView内图片被裁剪，需实现垂直滚动阅读

我明白你现在的困扰：竖屏时图书图片能完整显示，但横屏时图片被裁剪，想要实现横屏时可以垂直滚动查看整张图对吧？咱们一步步来修复这个问题。

首先你之前直接固定heightImage和widthImage为1000的思路不太对，这样既没法匹配图片的原始比例，也不能自适应屏幕尺寸。核心思路应该是保持图片的原始宽高比，然后根据当前屏幕宽度动态计算图片高度，再判断这个高度是否超过屏幕高度，以此决定是否开启ScrollView的垂直滚动。

步骤1：获取图片原始宽高比 #

首先得拿到图片的实际宽高，算出比例，这样后续不管屏幕怎么变，图片都能保持正确比例显示。用Image.getSize方法就能实现：

componentDidMount() {
  // 获取第一张图片的实际尺寸，多张图片可按需处理
  Image.getSize(require('../Resources/page002.png'), (imgWidth, imgHeight) => {
    this.setState({
      imageRatio: imgWidth / imgHeight, // 保存图片宽高比
    });
  });
}

步骤2：优化屏幕方向监听逻辑 #

去掉固定的图片尺寸，换成根据屏幕宽度和图片比例动态计算的高度，同时判断是否需要开启滚动：

_orientationDidChange = (orientation) => {
  const windowSize = Dimensions.get('window');
  const { imageRatio } = this.state;
  
  // 根据屏幕宽度和图片比例，计算图片应有的高度
  const imgHeight = windowSize.width / imageRatio;
  // 判断图片高度是否超过屏幕高度，决定是否允许滚动
  const needScroll = imgHeight > windowSize.height;

  this.setState({
    width: windowSize.width,
    height: windowSize.height,
    calculatedImgHeight: imgHeight,
    scrollEnabled: needScroll,
  }, () => {
    this.renderPdfViewer();
  });
}

步骤3：优化内容渲染代码 #

让图片使用动态计算的尺寸，同时确保ScrollView和FlatList的嵌套滚动正常：

renderPdfViewer = () => {
  const { width, calculatedImgHeight, scrollEnabled } = this.state;
  
  const QuranImage = [];

  // 第一张图片的ScrollView
  QuranImage.push(
    <ScrollView 
      scrollEnabled={scrollEnabled} 
      nestedScrollEnabled={true}
      style={{ width: width }}
    >
      <Image 
        style={{ 
          tintColor: 'black', 
          width: width, 
          height: calculatedImgHeight,
          resizeMode: 'contain' // 确保图片完整显示，不被裁剪
        }} 
        source={require('../Resources/page002.png')} 
      />
    </ScrollView>
  );

  // 第二张图片同理
  QuranImage.push(
    <ScrollView 
      scrollEnabled={scrollEnabled} 
      nestedScrollEnabled={true}
      style={{ width: width }}
    >
      <Image 
        style={{ 
          tintColor: 'black', 
          width: width, 
          height: calculatedImgHeight,
          resizeMode: 'contain'
        }} 
        source={require('../Resources/page003.png')}
      />
    </ScrollView>
  );

  this.setState({
    pdfViewer: (
      <FlatList 
        horizontal={true} 
        nestedScrollEnabled={true} 
        pagingEnabled={true} 
        data={QuranImage} 
        keyExtractor={(item, index) => index.toString()} 
        renderItem={({item,index}) => item} 
        style={{ width: width }}
      />
    )
  });
}

步骤4：初始化状态 #

修改初始状态，去掉固定的图片尺寸变量，换成我们需要的动态计算变量：

state = {
  width: Dimensions.get('window').width,
  height: Dimensions.get('window').height,
  imageRatio: 1, // 默认比例，后续会被实际图片比例替换
  calculatedImgHeight: Dimensions.get('window').width,
  scrollEnabled: false,
  pdfViewer: null,
};

关键细节说明 #

• resizeMode: 'contain'：这个属性会让图片完整适配设置的尺寸，既不会拉伸变形，也不会被裁剪。
• 动态计算高度：横屏时屏幕宽度变大，图片高度会按比例随之增加，当超过屏幕高度时，ScrollView自动开启垂直滚动，用户就能滑动查看完整图片。
• nestedScrollEnabled={true}：确保嵌套的ScrollView和FlatList之间的滚动交互不会冲突，流畅触发滚动。

这样修改后，竖屏时图片会自适应屏幕宽度完整显示，横屏时如果图片高度超出屏幕，就能通过垂直滚动查看整张图片了。

内容的提问来源于stack exchange，提问作者B. Mohammad