react-native - 无法从 React Native 中的 Material Top Bar Navigator 中删除 boxShadow

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,
      },
    },
  }
);

我试图在 tabBarOptions 内的 style 对象中将框阴影设置为 none。这就是我希望框阴影样式的位置。 backgroundColor 属性工作正常，但 boxShadow 和某些其他属性(如 border)似乎根本没有注册。特别是，将 backgroundColor 属性设置为无效颜色实际上会删除 boxShadow，但选项卡栏默认为白色，我不一定要使用它。我还尝试更改 tabStyle 对象内的 boxShadow，这是针对单个选项卡的样式，而不是整个选项卡栏，但得到了相同的结果。如何获得理想的效果？

Answer 1

我已经通过在 style 对象中设置 elevation: 0 来获得所需的行为。显然，标签栏有一个默认的 elevation 值，它会自动给它一个框阴影并覆盖其他与框阴影相关的样式。这是一个仅适用于 Android 的属性，将其设置为 0 可以消除 Android 上的阴影，但在 iOS 上有一个非常细的边框而不是框阴影。这是一个完全不同的问题。如果我找到适用于这两个平台的解决方案，我将更新此答案。