Реагируйте на Native createBottomTabNavigator с интервалом

Question

Я уже некоторое время пытаюсь выяснить это.

Мне интересно, возможно ли достичь этого, добавив расстояние между стороной и нижней частью навигационной панели, что-то похожее на приведенный ниже макет:

Заранее спасибо!

Answer 1

Вы можете легко добиться этого с помощью стилей.

const DEVICE_WIDTH = Dimensions.get('window').width;

tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'red',
    marginLeft:20, // Use margins as you required
    marginRight:20,
    marginBottom:20,
    width: DEVICE_WIDTH - 40, // Or using a percentage as required
    borderRadius:25,
  },
}

Или вы можете использовать уже реагирующий компонент в качестве навигатора вкладок.

const tab = createBottomTabNavigator(
{
    tabBarComponent: props =>
      <Component
        style={{ //Styles //}}
      />,
  },
);