如何在react-navigation标题下隐藏阴影？

Question

如何在react-navigation标题下隐藏阴影？
它们看起来像这样.

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

以下适用于我,因为原始样式表在iOS上使用"borderBottomWidth":

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

Answer 3

在反应导航 V5 中，您可以这样做：为所有屏幕执行此操作将screenOptionsprop应用到<Stack.Navigator>

例如：

  <Stack.Navigator
    screenOptions={{
      headerStyle: {
        elevation: 0,
        shadowOpacity: 0
      },
    }}
  />
  </Stack.Navigator>

为特定屏幕执行此操作 apply optionsprop to<Stack.Screen>

例如：

  <Stack.Screen
    name="Example"
    component={ExampleComponent}
    options={{
      headerStyle: {
        elevation: 0,
        shadowOpacity: 0
      },
    }}
  />

Answer 4

In v5 you can do the following

<Stack.Navigator>
      <Stack.Screen
        name="Example"
        component={ExampleComponent}
        options={{
          headerStyle: {
            elevation: 0,
            shadowOpacity: 0
          },
        }}
      />
</Stack.Navigator>

Answer 5

下午好，React Navigation 6：

<Stack.Navigator screenOptions={{headerShadowVisible:false}}>

Answer 6

我不知道这个答案有多少价值，但是分享我的代码以让您知道这对我来说适用于react-navigation版本：3.9.1

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