我如何在屏幕顶部显示react-native的标签栏

Question

TabBarposition ='top'使应用程序由于react-native-router-flux（或导航）更新而崩溃。它曾经可以工作，但是现在出现了这个错误：

我的代码：

Answer 1

自从react-native 0.61.2起，Viewpagerandroid已删除了react-native的表单，但是您使用的选项卡库尚未更新以适应它。    首先，找到使用Viewpagerandroid的库文件，然后将其导入 来自react-native-viewpager。

例如，我使用react-native-scrollable-view，而ScrollableTabView使用它。 我在react-native中删除导入，然后从@ react-native-community / viewpager导入

const {
     Dimensions,
     View,
     Animated,
     ScrollView,
     Platform,
     StyleSheet,
     //ViewPagerAndroid //**delete it**
     InteractionManager,
   } = ReactNative;
   const ViewPagerAndroid = require("@react-native-community/viewpager")

另一种方法是检查库的新版本是否适应它。

Answer 2

您正在使用ViewPagerAndroid的旧方法。不推荐使用旧的，而使用具有本地反应性的新社区。您可以看到频道日志here。
这意味着如果您现在使用ViewPagerAndroid，则可以使用新的而不是旧的。

您可以查看新的ViewPager存储库here

首先安装新库

yarn add @react-native-community/viewpager

或

npm install @react-native-community/viewpager --save

如果您使用的是RN> = 0.60，则无需链接，自动链接会做到这一点
如果您使用RN <0.60，请运行react-native link @react-native-community/viewpager

或手动链接阅读documentation

然后删除旧的ViewPagerAndroid导入

import { ViewPagerAndroid } from 'react-native'; //Remove this import

像这样单独导入ViewPager

import ViewPager from '@react-native-community/viewpager'; //New way of importing

如果仍然出现错误，请尝试删除该应用并重新安装。

Answer 3

当您运行 npm install 时会发生这种情况。如果您在屏幕上使用选项卡，请执行以下步骤：

1：删除节点模块
2：注释你的标签代码
3: yarn add ...(package.json 中的每个包)