如何隐藏下的反应，导航头的影子？

Question

如何隐藏下的反应，导航头的影子？ 他们是这样的。

Answer 1

添加以下到navigationOptions标题样式。

const AppNavigation = StackNavigator(
  {
    'The First Screen!': { screen: FirstScreen },
  },
  {
    navigationOptions: {
      header: {
        style: {
          elevation: 0, // remove shadow on Android
          shadowOpacity: 0, // remove shadow on iOS
        },
      },
    },
  },
);

该文档是不是很大，但你可以了解在React Navigation Docs navigationOptions。

Answer 2

对我来说，以下的作品与原始样式表使用"borderBottomWidth" on iOS：

const navigator = StackNavigator(screens, {
  navigationOptions: {
    headerStyle: {
      elevation: 0,
      shadowOpacity: 0,
      borderBottomWidth: 0,
    }
  }
});

Answer 3

我不知道这个答案会是多么重要，但分享我的代码，让你知道，这很适合我的反应，导航版本：3.9.1

const AppNavigation = StackNavigator(
{
  FirstScreen,
},
{
 defaultNavigationOptions: {
  headerStyle: {
    elevation: 0, //for android
    shadowOpacity: 0, //for ios
    borderBottomWidth: 0, //for ios
  },
},
})

Answer 4

这对我的作品：

export const AppNavigator = StackNavigator(
    {
      Login: { screen: LoginScreen },
      Main: { screen: MainScreen },
      Profile: { screen: ProfileScreen },
    },
    navigationOptions: {
        headerStyle: {
            elevation: 0,
            shadowOpacity: 0,
        }
    }
);

要么

export const AppNavigator = StackNavigator(
    {
      Login: { screen: LoginScreen },
      Main: { screen: MainScreen },
      Profile: { screen: ProfileScreen },
    },
    header: {
        style: {
            elevation: 0, //remove shadow on Android
            shadowOpacity: 0, //remove shadow on iOS
        }
    }
);

Answer 5

尝试通过cardStyle: { shadowColor: 'transparent' }

export const AppNavigator = StackNavigator(
{
  Login: { screen: LoginScreen },
  Main: { screen: MainScreen },
  Profile: { screen: ProfileScreen },
},
cardStyle: { shadowColor: 'transparent' }

按这个问题React Navigation Stack Navigator default shadow styling

Answer 6

我一直在试图解决这个问题，在过去的几个小时，终于找到了解决办法。在我的情况的问题是，头部是比其他部件的其余部分不同的Z位置。

尝试：

const styles = {
  headerStyle: {
    zIndex: 1
  }
}

Answer 7

截至2019这个答案并不在3版本。

这样做的新方法是：

const AppNavigation = StackNavigator(
  {
    'The First Screen!': { screen: FirstScreen },
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        elevation: 0,
        shadowOpacity: 0,
      },
    },
  },
);

Answer 8

你可以试试这个，它为我工作！

export const SignedOut = StackNavigator({
  SignIn: {
    screen: SignInScreen,
    navigationOptions: {
      title: "SignIn",
      headerStyle: {
        shadowOpacity: 0, // This is for ios
        elevation: 0 // This is for android
      }
    }
  }
});

Answer 9

阴影是通过抬高，利用实现：

 headerStyle: {
     backgroundColor: 'white',
     shadowColor: 'transparent',
     elevation: 0,
 },