我正在使用React Native(Expo CLI)。由于我重新安装了npm,当我尝试运行npm start
时,我发现了一些与react-native-snap-carousel
相关的类似错误(我正在使用它)。
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
因此,在它的主文件中导入了{PropTypes} from "react";
并更改为import PropTypes from "prop-types";
(以前安装)。还将propTypes.items: PopTypes.array.isRequired
更改为propTypes.items:PropTypes.array
,与slideStyle
相同(因为我开始收到与items
和slideStyle
相关的新错误),但现在我收到了类似
的新错误。所有错误都与react-native-snap-carousel
相关
这是我的软件包。json
下面是我如何使用react-native-snap-carousel
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>
);
}
1条答案
按热度按时间sh7euo9m1#
我注意到不再支持
react-native-snap-carousel
,因此我迁移到react-native-reanimated-carousel