如何隐藏反应导航标题下的阴影？

Posted 2023-02-23

【中文标题】如何隐藏反应导航标题下的阴影？

【英文标题】：How do I hide the shadow under react-navigation headers?

【发布时间】：2017-03-10 03:35:23

【问题描述】：

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

【参考方案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。

【讨论】：

这给了我错误：ExceptionsManager.js:63 Objects are not valid as a React child (found: object with keys style). If you meant to render a collection of children, use an array instead. in View (at CardStack.js:391)

【参考方案2】：

在 React Navigation V5 中，您可以这样做： 为所有屏幕执行此操作将screenOptions prop 应用于<Stack.Navigator>

例如：

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

要针对特定​​屏幕执行此操作，请将 options 属性应用于 <Stack.Screen>

例如：

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

更新 V6：

自发布 React Navigation V6 以来，您无法使用 headerStyle 选项隐藏标题阴影。而不是你可以使用布尔选项headerShadowVisible 并将其设置为false，如下例所示：

    <Stack.Screen
      name="Example"
      component=ExampleComponent
      options=headerShadowVisible: false
    />

【讨论】：

这应该是正确的答案。

【参考方案3】：

以下对我有用，因为原始样式表使用"borderBottomWidth" on iOS：

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

【参考方案4】：

我不知道这个答案有多大价值，但分享我的代码让你知道这对我有用 react-navigation 版本：3.9.1

const AppNavigation = StackNavigator(

  FirstScreen,
,

 defaultNavigationOptions: 
  headerStyle: 
    elevation: 0, //for android
    shadowOpacity: 0, //for ios
    borderBottomWidth: 0, //for ios
  ,
,
)

【参考方案5】：

在 v5 中，您可以执行以下操作

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

【讨论】：

这在 React Navigation 的 V5 中实现是完全正确的。非常感谢！

【参考方案6】：

这对我有用：

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

【讨论】：

@GregBenner 尝试在组件中添加代码，例如Login.navigationOptions = headerStyle: elevation: 0, shadowOpacity: 0,

const stackNavigatorLoggedInConfig = car​​dStyle: shadowColor: 'transparent' , headerStyle: height: 0, padding: '0', border: 'none' ,

【参考方案7】：

在 react-navigation 版本 5.x.x 中：

      <Tab.Navigator
        tabBarOptions=
          activeTintColor: colors.darkGray,
          labelStyle:  fontSize: 12 ,
          style:  backgroundColor: colors.white, borderTopWidth: 0, elevation: 0, shadowOpacity: 0, ,
        
      >

【参考方案8】：

尝试传递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

【讨论】：

谢谢，我尝试了各种将 headerStyle 更改为无效的方式。这在我的堆栈导航器底部起到了作用！

【参考方案9】：

过去几个小时我一直在尝试解决这个问题，终于找到了解决方案。 我的问题是标题与其他组件的 Z 位置不同。

尝试：

const styles = 
  headerStyle: 
    zIndex: 1
  

【参考方案10】：

截至 2019 年，此答案在版本 3 中不起作用。

新的做法是：

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

【参考方案11】：

我正在使用反应导航 v5，我使用此代码：

 const HomeStackScreen = (navigation) => (
  <HomeStack.Navigator
    initialRouteName="Home"
    headerMode="screen"
    mode="modal"
    screenOptions=
      headerStyle: 
        backgroundColor: COLORS.WHITE,
        elevation: 0, // remove shadow on Android
        shadowOpacity: 0, // remove shadow on iOS
        borderBottomWidth: 0,
      ,
      headerTintColor: COLORS.GREY,
      headerTitleStyle: 
        fontFamily: 'Montserrat-SemiBold',
        fontWeight: '600',
        fontSize: 18,
      ,
    >
    <HomeStack.Screen
      name="Home"
      component=Home
      options=
        title: 'Expanded',
        headerLeft: () => <RenderHeaderLeft />,
        headerRight: () => <RenderHeaderRight navigation=navigation />,
        headerTitleAlign: 'left',
      
    />
    <HomeStack.Screen name="HomeDetails" component=HomeDetails />
  </HomeStack.Navigator>
);

将shadowOpacity和elevation放在headerStyle中

【参考方案12】：

下午好，React Navigation 6：

<Stack.Navigator screenOptions=headerShadowVisible:false>

【参考方案13】：

你可以试试这个，它对我有用！

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

【参考方案14】：

阴影是通过高程实现的，使用：

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

【参考方案15】：

对于 React Native Navigation 5

<Stack.Screen
      name="Profile"
      component=Profile
      options=
        headerTitle: "Profile",
        headerHideShadow: true,
      
    />

或者

<Stack.Navigator
    screenOptions=
      headerHideShadow: true,
    
  >