react-navigation - 我们如何在带有bottomTabNavigator的react导航V3中使用滑动

Question

我正在使用 react navigation V3，我想在我的 bottomTabNavigator 中使用滑动。
我不能这样做，因为 createBottomTabNavigator 尚不支持它，并且 createBottomNavigator 实际上已被弃用。
这很烦人，因为在 react navigation V2 中我们可以轻松完成。
只需 createMaterialTopTabNavigator 支持滑动，但我想要底部导航器而不是顶部导航器

Answer 1

如果你看看 documentation为 createMaterialTopTabNavigator您可以在 TabNavigatorConfig 中看到可以使用 tabBarPosition 设置标签栏的位置

Position of the tab bar, can be 'top' or 'bottom', default is 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