Реагирующая сложная форма для нижней панели навигации

Question

Я хотел бы получить конкретную форму вида для нижней навигации в моем проекте с исходным кодом.Это прямоугольник с центром в форме круга.Мне нужно, чтобы оба были объединены в одном виде, потому что мне нужно отбрасывать из него тень (возвышение в Android, подпорки теней в iOS).Вот макет:

Есть подсказки, как этого добиться?Спасибо.

Answer 1

Возможно, вам удастся просто переопределить tabBarIcon, как в этого урока и поиграть с zIndex.

В противном случае можно переопределить весь tabBarComponent чем-то вроде:

createBottomTabNavigator(
  navigators,
  {
    tabBarComponent: props => <CustomTabBar {...props} />
  }
)

Вот ссылка на tabBarComponent по умолчанию, которую вы можете использовать для справки при создании собственного CustomTabBar компонента.

Тени может быть трудно достичь. С чистым React Native у вас может быть 2 круга, один под прямоугольником для тени, а другой над прямоугольником, чтобы скрыть тень над нижним кругом. Затем добавьте тень как к прямоугольнику, так и к нижнему кругу, рискуя получить более темную тень в углах, где встречаются круг и прямоугольник. Если это не выглядит красиво, то сплошная граница может работать лучше, чем тень.