RN填坑:使用react-native-swiper组件报错

首先,将package.json中版本配置信息放上:

"dependencies": {
	"@react-native-community/viewpager": "^2.0.1",
    "react": "16.9.0",
    "react-native": "0.61.2",
    "react-native-easy-toast": "^1.2.0",
    "react-native-gesture-handler": "^1.4.1",
    "react-native-htmlview": "^0.15.0",
    "react-native-reanimated": "^1.3.0",
    "react-native-scrollable-tab-view": "https://github.com/PizzaLiu/react-native-scrollable-tab-view#b45bde7fc",
    "react-native-snap-carousel": "^3.8.3",
    "react-native-swiper": "^1.5.14",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.9.4",
    "react-navigation-tabs": "^2.5.6"

错误提示信息:
RN填坑:使用react-native-swiper组件报错_第1张图片
错误原因解释:

其实错误提示中说的已经很清楚了。只需要耐心翻译一下即可。
意思大概就是,react-native-swiper组件中用到了ViewPagerAndroid。并且在react-native-swiper中,使用类似import { ViewPagerAndroid } from ‘react’;的方法引入ViewPagerAndroid。但是,ViewPagerAndroid组件已经从react-native的核心包中移除了,即使用ViewPagerAndroid时不能从react-native中引入,从而导致报错。

解决办法:

明确了错误原因,解决起来也就容易了,即找到react-native-swiper组件的源代码,将其中错误的地方进行改正。

①进入项目目录下的node_modules\react-native-swiper\src\index.js文件。

②将import中的ViewPagerAndroid删掉。
RN填坑:使用react-native-swiper组件报错_第2张图片
③引入ViewPager,如下所示:

import ViewPager from "@react-native-community/viewpager";

RN填坑:使用react-native-swiper组件报错_第3张图片
④下拉,找到该文件的第651行,或651行左右,具体位置如下图所示:
RN填坑:使用react-native-swiper组件报错_第4张图片
⑤将上图的标签改为

⑥保存。重新run。

附:也可在react-native-swiper的Github的Issues中寻找答案。本文所涉及的解决方案的来源如下:
RN填坑:使用react-native-swiper组件报错_第5张图片

https://github.com/leecade/react-native-swiper/issues/1071#issuecomment-536890824

你可能感兴趣的:(react-native)