ViewPager 重复引入导致的问题解决方法

三微授渔

无知知青

项目当中使用到了 react-native-scroll-tab-view ,然后后来需要使用到 sticky的 tab栏的效果,所以又引入了

react-native-head-tab-view

zyslife/react-native-head-tab-view

运行的时候报错如下

"Tried to register two views with the same name"

然后就进入到了漫长的百度和google的流程...各种扒坑然后得到的主要答案为修改 package.json当中添加

"resolutions": { 
    "@react-native-community/viewpager": "^2.0.1" 
}

然后删掉 node_modules 目录后运行 yarn 或者(yarn install)重新安装依赖并强制

@react-native-community/viewpager 安装为一个指定版本... but but but!

并没有效果!!!

后来在运行的内容当中看到提示 @react-native-community/viewpager 将不在支持且提示使用 react-native-pager-view替换所以就老老实实的按照提示的去做 , 所以我使用一下的解决方案解决了问题!

callstack/react-native-pager-view

第一步

npm i  react-native-pager-view  --save

第二部 node_modules文件中找到 react-native-scroll-tab-view 当中的index.js

const React = require('react');
const { Component } = React;
const { ViewPropTypes } = ReactNative = require('react-native');
const createReactClass = require('create-react-class');
const PropTypes = require('prop-types');
const {
  Dimensions,
  View,
  Animated,
  ScrollView,
  Platform,
  StyleSheet,
  InteractionManager,
} = ReactNative;
// const ViewPagerAndroid = require('@react-native-community/viewpager');  //删掉这行
const TimerMixin = require('react-timer-mixin');
// const ViewPager = require('@react-native-community/viewpager'); // @react-native-community 不再支持
import PagerView from 'react-native-pager-view'; // 使用PagerView 代替ViewPager
const SceneComponent = require('./SceneComponent');
const DefaultTabBar = require('./DefaultTabBar');
const ScrollableTabBar = require('./ScrollableTabBar');
// 原来的
const AnimatedViewPagerAndroid = Platform.OS === 'android' ?
  Animated.createAnimatedComponent(ViewPager) :
  undefined;