Как мы можем использовать свайп в реагирующей навигации V3 с bottomTabNavigator

Question

Я использую реагирующую навигацию V3, и я хочу использовать свайп в моем bottomTabNavigator.я не могу этого сделать, потому что createBottomTabNavigator пока не поддерживает его, а createBottomNavigator фактически устарел.Это очень раздражает, потому что в реагирующей навигации 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