类型错误：无法读取未定义的属性“setPageWithoutAnimation”

Question

我最近将react-native从0.64.2更新到0.71.3 还有其他依赖项

但不幸的是我面临以下错误

TypeError: Cannot read property 'setPageWithoutAnimation' of undefined

This error is located at:
    in ViewPager (created by AnimatedComponent)

还附上图片以供参考...

期待一些帮助，到目前为止找不到任何解决方案。

Answer 1

ViewPagerAndroid 已停止使用并从 React Native 中删除，因此您需要将其替换为react-native-pager-view 库。

以下是在react-native-scrollable-tab-view中进行必要更改的步骤：

要从react-native-scrollable-tab-view中删除ViewPagerAndroid，请按照以下步骤操作：

1. 导航至

   node_modules/react-native-scrollable-tab-view/index.js

   。
2. 删除对 ViewPagerAndroid 的引用。

以这种方式从react-native-pager-view包中导入PagerView模块：

import PagerView from 'react-native-pager-view';

替换 AnimatedViewPagerAndroid 定义：

const AnimatedViewPagerAndroid = Platform.OS === 'android' ? Animated.createAnimatedComponent(PagerView) : undefined;

删除 getNode() 调用并修改 goToPage(pageNumber) 函数：

goToPage(pageNumber) {
    if (Platform.OS === 'ios') {
        const offset = pageNumber * this.state.containerWidth;
        if (this.scrollView) {
            this.scrollView.scrollTo({x: offset, y: 0, animated: !this.props.scrollWithoutAnimation});
        }
    } else {
        if (this.scrollView) {
            if (this.props.scrollWithoutAnimation) {
                this.scrollView.setPageWithoutAnimation(pageNumber);
            } else {
                this.scrollView.setPage(pageNumber);
            }
        }
    }
}

这应该正确设置对react-native-scrollable-tab-view模块使用PagerView而不是ViewPagerAndroid。

应使用补丁包，以便修改保留在节点模块代码中。当我们需要绕过错误或对库进行修改，但又不想每次运行

npm install

或执行构建时手动重新应用这些更改时，这特别有用。以下是如何将其应用到项目中：

使用npm或yarn安装补丁包：

npm i patch-package

或

yarn add patch-package

在

node_modules/react-native-scrollable-tab-view/index.js

中进行必要的修改后，就可以创建补丁了。在项目的根目录中，运行：

npx patch-package react-native-scrollable-tab-view

此命令将在项目的 patch/ 目录中创建一个文件，其中包含对react-native-scrollable-tab-view 所做的更改。

最后，每当运行

npm install

时，都会自动应用这些补丁。为此，请将以下内容添加到

package.json

文件的脚本部分：

"scripts": {
  "postinstall": "patch-package"
}

现在，每当您运行

npm install

或生成“构建”时，对react-native-scrollable-tab-view的修改将自动应用，使它们在构建和安装中持久存在。

有关更多详细信息，请查看补丁包的 npm 页面：https://www.npmjs.com/package/patch-package

Answer 2

react-native-scrollable-tab-view 的维护者隐藏在沉默背后。我分叉并更新了存储库。你可以使用它（package.json）：

    "react-native-scrollable-tab-view": "https://github.com/bennekrouf/react-native-scrollable-tab-view.git",