我们如何在使用bottomTabNavigator的反应导航V3中使用滑动

Question

我正在使用反应导航V3，我想在我的bottomTabNavigator中使用滑动。我不能这样做，因为createBottomTabNavigator还不支持它，并且实际上不推荐使用createBottomNavigator。这非常烦人，因为在反应导航V2中我们可以迭代地做。只是createMaterialTopTabNavigator支持滑动但我想要一个底部导航器而不是顶部导航器

Answer 1

如果你看一下documentation的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