Question

我正在使用React Navigation V3，我想在我的bottomTabNavigator中使用滑动。我无法执行此操作，因为createBottomTabNavigator尚不支持它，并且createBottomNavigator实际上已被弃用。这很烦人，因为在反应导航V2中，我们可以轻松完成操作。只需滑动createMaterialTopTabNavigator支持，但我想要一个底部导航器而不是顶部导航器

Answer 1

如果您查看createMaterialTopTabNavigator的{{3}}，您会发现在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);

以下是显示它可以正常工作的小吃documentation

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

1 个答案: