Expo升级后react-native-snap-carousel报Cannot read property 'style'错误

核心问题：renderItem返回值错误 #

你的_renderItem函数返回的是对象{item.component}，但react-native-snap-carousel要求renderItem必须返回React元素节点，而非普通对象。组件内部会尝试读取返回元素的style属性，对象没有该属性直接触发报错。

修改_renderItem：

const _renderItem = ({ item, index }) => {
  return item.component;
};

额外排查优化点 #

• 版本兼容性问题
  升级Expo后，多年未维护的react-native-snap-carousel可能和新版React Native/Expo的API不兼容。若修复上述问题后仍报错，建议替换为维护活跃的轮播库，比如react-native-reanimated-carousel或moti的轮播组件。

• 数据状态优化
  如果不需要在组件内部修改轮播数据，直接使用props.slideDatas即可，无需存入state做多余的状态同步：

// 移除这行冗余代码
// const [data, setData] = useState(props.slideDatas);
// 直接传入props数据
<Carousel
  data={props.slideDatas}
  // ...其他属性
/>

• pagination组件传参
  当前调用pagination()未传参，若分页组件需要activeSlide等数据来渲染指示器，记得传入对应参数：

{pagination({ activeSlide, totalItems: props.slideDatas.length })}

修改后的完整代码示例：

import React, { useState } from "react";
import { View, StyleSheet, Platform } from "react-native";
import Carousel, { Pagination } from "react-native-snap-carousel";
import Metrics from "../../styles/Dimensions";
import pagination from "./pagination";

const Slider = (props) => {
  const [activeSlide, setActiveSlide] = useState(0);

  const _renderItem = ({ item, index }) => {
    return item.component;
  };

  return (
    <View style={styles.container}>
      <Carousel
        layout={props.assets ? "stack" : "default"}
        data={props.slideDatas}
        renderItem={_renderItem}
        sliderWidth={373 * Metrics.horizontalScale}
        itemWidth={327 * Metrics.horizontalScale}
        onSnapToItem={(index) => setActiveSlide(index)}
      />
      {pagination({ activeSlide, totalItems: props.slideDatas.length })}
    </View>
  );
};

export default Slider;

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