不变违规：ViewPagerAndroid已从React Native中移除。“ react-native-viewpager”而非“ react-native”

Question

当我使用这个示例在我的应用程序上实现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} />
        );
      }
    }

Answer 1

您应将 react-native-swiper 模块更新为每晚。然后，npm清除缓存。
请按照以下步骤操作：

1. cd android
   
2. ./ gradlew clean
   
3. cd ..
   
4. 纱线去除react-native-swiper
   
5. 纱线添加react-native-swiper @ nightly
   
6. rm -rf node_modules
   
7. npm缓存清理--force
   
8. npm install
   
9. react-native run-android
   

它将起作用。但如果没有，请重新启动系统。

Answer 2

我通过以下方法解决它：

1. 安装此模块：react-native-community / viewpager

2. 转到文件：node_modules \ react-native-swiper \ src \ index.js，然后： 添加以下行：从“ @ react-native-community / viewpager”导入ViewPager； 并从导入中删除此ViewPagerAndroid。

3. 在同一文件中，转到返回函数，然后将ViewPagerAndroid更改为ViewPager

这对我有用

Answer 3

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

之后，Thena从导入的“ react-native”中删除ViewPagerAndroid并使用

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

希望有帮助。毫无疑问

Answer 4

您可以通过将 react-native-swiper 更新到最新（每晚）来解决此错误，如果您不想更新react-native-swiper，则可以安装 @ react-native-community / viewpager 并从react-native中删除ViewPagerAndroid的导入，然后从@ react-native-community / viewpager中导入

Answer 5

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

Answer 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 node_modules

npm 安装

npm start -- --reset-cache