升级Expo SDK 52后React Native轮播图图片缩放异常问题

升级到Expo SDK 52（对应React Native 0.76.5）后，轮播图内的竖版图片出现裁剪、错位，核心原因是新SDK的图片渲染/缩放逻辑变更，再加上代码中容器尺寸不统一、resizeMode配置不当导致的。以下是针对性的解决方法：

问题根源 #

1. resizeMode 配置错误：当前使用resizeMode="cover"，会强制图片按容器比例填充，超出部分直接裁剪，竖版图片的上下部分会被切掉。
2. 容器尺寸不统一：Carousel组件的高度设置为PAGE_WIDTH*0.6，但内部包裹图片的View和Image高度却是PAGE_WIDTH/1.8，尺寸不一致引发布局错位。
3. SDK 变更影响：React Native 0.76.5（SDK52对应的版本）对Image组件的布局计算逻辑做了调整，旧版本的适配方式不再生效。

解决方案 #

1. 修正resizeMode，保证图片完整显示 #

将resizeMode从cover改为contain，这样图片会按原始比例完整显示在容器内，不会被裁剪。如果需要填充容器同时避免空白，可以搭配背景色或轻微缩放图片（见代码注释）。

2. 统一所有容器的尺寸 #

把Carousel、内部View、Image的高度统一为同一个值，避免布局偏移。

3. 优化容器布局细节 #

添加overflow: "hidden"确保圆角生效，同时使用百分比宽度/高度替代固定数值，提升适配性。

修改后的完整代码 #

import * as React from "react";
import { Animated, View, ImageStyle } from "react-native";
import { useSharedValue } from "react-native-reanimated";
import Carousel, {
  ICarouselInstance,
  Pagination,
} from "react-native-reanimated-carousel";

import { window } from "../features/favourites/constants";

const PAGE_WIDTH = window.width;
// 统一轮播容器高度，避免尺寸不一致
const CAROUSEL_HEIGHT = PAGE_WIDTH * 0.6;

function Test({
  images,
}: {
  images: { original: string; thumbnail: string }[];
}) {
  const progress = useSharedValue<number>(0);
  const ref = React.useRef<ICarouselInstance>(null);

  const onPressPagination = (index: number) => {
    ref.current?.scrollTo({
      count: index - progress.value,
      animated: true,
    });
  };

  return (
    <View style={{ flex: 1 }}>
      <Carousel
        ref={ref}
        vertical={false}
        width={PAGE_WIDTH}
        height={CAROUSEL_HEIGHT}
        loop
        pagingEnabled
        snapEnabled
        autoPlay
        autoPlayInterval={2500}
        onProgressChange={(_, progressValue) => {
          progress.value = progressValue;
        }}
        mode="parallax"
        modeConfig={{
          parallaxScrollingScale: 0.9,
          parallaxScrollingOffset: 50,
        }}
        data={images}
        renderItem={({ index }) => (
          <View
            key={index}
            style={{
              backgroundColor: "#f5f5f5", // 添补图片空白区域的背景色
              borderRadius: 10,
              width: PAGE_WIDTH,
              height: CAROUSEL_HEIGHT,
              shadowColor: "#000",
              shadowOffset: { width: 0, height: 4 },
              shadowOpacity: 0.34,
              shadowRadius: 10.32,
              elevation: 16,
              justifyContent: "center",
              alignItems: "center",
              overflow: "hidden", // 确保圆角裁剪生效
            }}
          >
            <Animated.Image
              source={{ uri: images[index].original }}
              style={[
                {
                  width: "100%",
                  height: "100%",
                  borderRadius: 10,
                } as ImageStyle,
              ]}
              resizeMode={"contain"} // 改为contain，保证图片完整显示
              // 若需要填充容器且不裁剪，可替换为以下配置：
              // resizeMode={"cover"}
              // style={{
              //   width: "100%",
              //   height: "100%",
              //   borderRadius: 10,
              //   transform: [{ scale: 1.1 }], // 轻微放大覆盖容器空白
              // }}
            />
          </View>
        )}
      />

      {Pagination && Pagination.Basic && (
        <Pagination.Basic
          progress={progress}
          data={images}
          dotStyle={{ backgroundColor: "rgba(0,0,0,0.2)" }}
          containerStyle={{ gap: 5, marginBottom: 10 }}
          onPress={onPressPagination}
        />
      )}
    </View>
  );
}

export default Test;

额外排查建议 #

• 清除项目缓存：运行npx expo start --clear，避免旧编译缓存导致的渲染异常。
• 查看React Native 0.76.5官方变更日志，确认Image组件的具体改动，是否有新属性需要适配。
• 若需要更精细的图片比例控制，可以通过Image.getSize预先获取图片宽高比，动态调整容器尺寸。

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