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

我试图框阴影设置none在style里面的对象tabBarOptions。这是我期望框阴影样式的地方。该backgroundColor属性工作正常，但boxShadow某些其他属性似乎border根本没有注册。奇怪的是，将backgroundColor属性设置为无效颜色实际上会删除boxShadow，但标签栏默认为白色，我不一定要使用。我还尝试更改对象boxShadow内部tabStyle，这是单个选项卡的样式，而不是整个选项卡栏，但得到了相同的结果。如何获得想要的效果？

Answer 1

tabBarStyle: { elevation:0 },

将海拔：0 放入 tabBarStyle 中。这对我有用，我希望它能有所帮助

Answer 2

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