React Native - Применение градиента для навигации TabNavigator

Question

Я использую React Navigation и пытаюсь применить линейный градиент от белого к прозрачному для навигатора вкладок, чтобы он располагался внизу экрана.

Я нашел хорошее решение для использования реактивного-линейного-градиента с заголовком навигации здесь: Реактивная навигация - Цвет градиента для заголовка

Что нет 'Мне ясно, как применить ту же логику к TabBar.Я попытался определить компонент, как в связанном примере, а затем передать его в backgroundColor, но он выдал ошибку.

Вот мой текущий код для tabBarOptions:

{
tabBarOptions: {
  activeTintColor: 'rgba(248, 164, 2, 0.6)',  // Color of tab when pressed
  inactiveTintColor: 'rgba(0,0,0,0.5)', // Color of tab when not pressed
  showLabel: false,
  indicatorStyle: {
    backgroundColor: 'transparent'
  },
  style: {
    backgroundColor: 'rgba(255, 255, 255, 1.0)',
    borderTopColor: 'transparent',
    height: dynamicSize(60),
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0
  },
},

},

Затем я передаю его в StackNavigator, определяя вкладки как:

tabs: {
  screen: TabVisibleNavigator
},

Answer 1

Решили пойти с взломом, который, кажется, работает нормально:

• В стиле tabBarOptions установите backgroundColor в прозрачный;позиционирование в абсолютное значение

• Создание градиентного изображения PNG, сохранение в качестве актива в проекте

• Загрузка PNG в качестве элемента в нижней части основногоПросмотр контейнера

• Установить стиль PNG как абсолютный, чтобы он отображался поверх фона контейнера

Это загрузит прозрачную панель вкладок поверх градиентаобраз.Не самое элегантное решение, но, надеюсь, оно поможет кому-то застрять в той же проблеме.