Не удается удалить boxShadow из Навигатора верхней панели материала в React Native

Question

Я использую навигацию по верхней вкладке из пакета навигации React Native, созданного с помощью функции createMaterialTopTabNavigator(). По умолчанию на панели вкладок есть тень от блока, которую я хотел бы отключить. Вот мой код для конфигурации экрана вкладки:

const TabScreen = createMaterialTopTabNavigator(
  {
    "Test one": { screen: TestScreen1 },
    "Test two": { screen: TestScreen2 },
    "Test three": { screen: TestScreen3 },
  },
  {
    tabBarPosition: 'top',
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions: {
      upperCaseLabel: false,
      scrollEnabled: true,
      activeTintColor: '#000',
      inactiveTintColor: 'rgb(180, 180, 180)',
      pressColor: 'orange',
      style: {
        boxShadow: 'none',
        backgroundColor: '#fff',
        numberOfLines: 1,
      },
      tabStyle: {
        //
      },
      labelStyle: {
        fontSize: 16,
        textAlign: 'center',
      },
      indicatorStyle: {
        borderBottomColor: 'orange',
        borderBottomWidth: 4,
      },
    },
  }
);

Я пытаюсь установить тень блока none в style объекте внутри tabBarOptions. Здесь я бы ожидал, что стиль для тени блока будет go. Свойство backgroundColor работает нормально, но boxShadow и некоторые другие свойства, такие как border, похоже, не регистрируются вообще. В частности, установка свойства backgroundColor на недопустимый цвет фактически удаляет boxShadow, но на панели вкладок по умолчанию используется белый цвет, который я не обязательно хочу использовать. Я также попытался изменить boxShadow внутри объекта tabStyle, который является стилем для отдельных вкладок, в отличие от всей панели вкладок, но получил те же результаты. Как получить желаемый эффект?

Answer 1

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

Answer 2

Попробуйте:

boxShadow: '0px 0px 0px rgba (0,0,0,0.0)'

Answer 3

вы пробовали shadowOpacity: 0; или цвет тени: # 000; не уверен, попробуйте!