React Native(Expo CLI)重装npm后react-native-snap-carousel报错求助

问题详情 #

重装npm后执行npm start出现如下错误：

TypeError: undefined is not an object (evaluating '_react.PropTypes.array')
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error   
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:95:4 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:141:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\@react-native\polyfills\error-guard.js:49:36 in ErrorUtils.reportFatalError
at node_modules\metro-runtime\src\polyfills\require.js:203:6 in guardedLoadModule
at http://192.168.1.6:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&hot=false&strict=false&minify=false:202384:3 in global code 

经排查错误来自react-native-snap-carousel组件，已尝试修改该组件主文件的PropTypes导入（从{PropTypes} from "react"改为import PropTypes from "prop-types"，且已安装prop-types包），并调整了items、slideStyle的PropTypes校验规则，但仍出现相关新错误。

组件使用代码 #

import React, { useState, useEffect } from "react";
import {
  View,
  StyleSheet,
  Image,
  Dimensions,
  TouchableWithoutFeedback,
} from "react-native";
import { getBannersApi } from "../../Api/HomeBanner";
import Carousel, { Pagination } from "react-native-snap-carousel";
import { size } from "lodash";
import { useNavigation } from "@react-navigation/native";

import { SERVER_RESOURCERS } from "../../Utils/Constans";

const width = Dimensions.get("window").width;
const height = 160;

export default function Banner() {
  const [banners, setBanners] = useState(null);
  const [banneActive, setBanneActive] = useState(0);
  const navigation = useNavigation();

  useEffect(() => {
    (async () => {
      const response = await getBannersApi();
      setBanners(response.data);
    })();
  }, []);

  const goToProduct = (id) => {
    navigation.push("product", { idProduct: id });
  };

  if (!banners) return null;

  const renderItem = ({ item }) => {
    return (
      <TouchableWithoutFeedback
        onPress={() => goToProduct(item.attributes.product.data.id)}
      >
        <Image
          style={styles.carousel}
          source={{
            uri: `${SERVER_RESOURCERS}${item.attributes.banner.data[0].attributes.formats.small.url}`,
          }}
        />
      </TouchableWithoutFeedback>
    );
  };

  return (
    <View style={styles.container}>
      <Carousel
        layout="default"
        data={banners}
        sliderWidth={width}
        itemWidth={width}
        renderItem={renderItem}
        loop={true}
        onSnapToItem={(i) => setBanneActive(i)}
        autoplay={true}
        autoplayInterval={5000}
        autoplayDelay={2000}
      />
      <Pagination
        dotsLength={size(banners)}
        activeDotIndex={banneActive}
        inactiveDotOpacity={0.6}
        inactiveDotScale={0.6}
        containerStyle={styles.dotsContainer}
        dotStyle={styles.dot}
        dotColor={styles.dot.backgroundColor}
        inactiveDotColor={styles.dot.backgroundColor}
      />
    </View>
  );
}

解决方案 #

方案一：替换为维护中的替代库 #

react-native-snap-carousel已停止维护，无法适配新版本React/React Native（React 16.8+已将PropTypes从核心包移出），推荐替换为react-native-reanimated-carousel：

• 卸载旧组件：npm uninstall react-native-snap-carousel
• 安装新组件：npm install react-native-reanimated-carousel
• 按照新组件文档调整代码逻辑，核心用法与原组件类似，可快速迁移。

方案二：修复原组件的PropTypes问题（不推荐，仅临时应急） #

若必须使用原组件，需修改组件所有涉及PropTypes的文件：

1. 确保已安装prop-types：npm install prop-types
2. 找到node_modules/react-native-snap-carousel目录下所有使用PropTypes的文件（如Carousel.js、Pagination.js、utils/helpers.js等）
3. 将所有import { PropTypes } from 'react'替换为import PropTypes from 'prop-types'
4. 无需修改isRequired等校验规则，仅修正导入即可解决未定义问题。

注意：修改node_modules文件属于临时方案，后续重装依赖会失效，可配合patch-package工具保存修改：

• 安装patch-package：npm install patch-package --save-dev
• 修改组件文件后执行：npx patch-package react-native-snap-carousel
• 后续重装依赖后执行npx patch-package即可恢复修改。

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