我们如何在React Navigation V3中使用bottomTabNavigator进行滑动

Question

我正在使用 React navigation V3，我想在我的 BottomTabNavigator 中使用滑动。我不能这样做，因为 createBottomTabNavigator 还不支持它，并且 createBottomNavigator 实际上已被弃用。这很烦人，因为在 React navigation V2 中我们可以很容易地做到这一点。只是 createMaterialTopTabNavigator 支持滑动，但我想要一个底部导航器而不是顶部导航器

Answer 1

如果您查看文档，createMaterialTopTabNavigator您会发现TabNavigatorConfig可以使用以下命令设置选项卡栏的位置tabBarPosition

标签栏的位置，可以是'top'或'bottom'，默认为top

因此，如果您在配置中使用createMaterialTopTabNavigator而不是并createMaterialBottomTabNavigator设置，您应该在底部看到一个但是。tabBarPosition: 'bottom'createMaterialTopTabNavigator

代码应该是这样的

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1',
  tabBarPosition: 'bottom' // <- add this line to your config
}

const MainNavigator = createMaterialTopTabNavigator(screens,config);
export default createAppContainer(MainNavigator);

这是一个显示其工作原理的小吃https://snack.expo.io/@andypandy/materialtopnavigator-at-the-bottom