不变违规：ViewPagerAndroid 已从 React Native 中删除。'react-native-viewpager' 而不是 'react-native'答案

【问题标题】：Invariant Violation: ViewPagerAndroid has been removed from React Native.'react-native-viewpager' instead of 'react-native'不变违规：ViewPagerAndroid 已从 React Native 中删除。'react-native-viewpager' 而不是 'react-native'
【发布时间】：2021-06-27 05:51:00
【问题描述】：

当我使用这个示例在我的应用程序上实现 Image-slider 时，我遇到了这个错误。

import React,{Component} from 'react'
    import {View,Text,TouchableOpacity, ViewPagerAndroid} from 'react-native'
    import Infoslider from 'react-native-infoslider'
     export default class example extends Component {
      constructor(props) {
        super(props);
        this.state = {
          data:[
              {
              title:"Hello World", 
              text:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard",
              image: require('../Images/Group.png')}
             ]
        };
      }
      render() {
        return (
         <Infoslider 
            data={this.state.data} />
        );
      }
    }

【问题讨论】：

标签： react-native

【解决方案1】：

您应该将 react-native-swiper 模块更新为 nightly。然后，npm 清除缓存。
请遵循：

cd 安卓

./gradlew 清洁

cd ..

yarn remove react-native-swiper

纱线添加 react-native-swiper@nightly

rm -rf 节点模块

npm 缓存清理 --force

npm 安装

react-native run-android

它会起作用的。如果没有，请重启系统。

【讨论】：

请检查一下这个 qs - stackoverflow.com/questions/60927843/…

【解决方案2】：

我通过以下方式解决它：

安装这个模块：react-native-community / viewpager
转到文件：node_modules\react-native-swiper\src\index.js，然后：添加这一行： import ViewPager from '@react-native-community/viewpager'; 并从导入中删除此 ViewPagerAndroid。
在同一个文件中，进入return函数，将ViewPagerAndroid改为ViewPager

这对我有用

【讨论】：

【解决方案3】：

您可以通过将 react-native-swiper 更新为 latest(nightly) 来解决此错误，如果您不想更新 react-native-swiper安装 @react-native-community/viewpager 并从 react-native 中移除 ViewPagerAndroid 的导入并从 @react-native-community/viewpager 导入它

【讨论】：

【解决方案4】：

您需要先 yarn add @react-native-community/viewpager 或 npm i @react-native-community/viewpager 。

然后在导入中从“react-native”中删除 ViewPagerAndroid 并使用

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

希望对您有所帮助。如有疑问，请随意

【讨论】：

配置项目“:@react-native-community_viewpager”时出现问题。 > 无法解析配置“：@react-native-community_viewpager:classpath”的所有工件。 > 无法解析 com.android.tools.build:gradle:3.2.1
你在用expo吗？
NO 我用过 npm
您是否安装并检查了github.com/react-native-community/react-native-viewpager的文档
好的，我会检查

【解决方案5】：

你需要添加 @react-native-community/viewpager 而不是从 react-native 导入 ViewPagerAndroid。

【讨论】：

我没用过expo。我是用npm
npm install @react-native-community/viewpager 如果您使用低于 0.59 的 react native 链接，则使用 react-native link @react-native-community/viewpager 否则它会自动与包链接。现在安装吊舱。希望它会帮助你。谢谢

【解决方案6】：

您可能还需要更新您的 babel 版本和运行时，以防出现“无法识别令牌”错误。按照以下步骤更新 babel 版本：

npm install @babel/core@^7.9.0

npm install @babel/runtime@^7.9.2

npm install typescript@^3.8.3

rm -rf 节点模块

npm 安装

npm start -- --reset-cache

【讨论】：