Comment masquer l'ombre sous les en-têtes réact-navigation?

Question

Comment masquer l'ombre sous les en-têtes réact-navigation?
Ils ressemblent à ceci.
 

Answer 1

Ajoutez ce qui suit au style d’en-tête navigationOptions.

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

La documentation n'est pas encore excellente, mais vous pouvez en apprendre plus sur les options de navigation dans le Réagissez Navigation Docs .

Answer 2

Ce qui suit fonctionne pour moi car la feuille de style originale utilise "borderBottomWidth" sur iOS :

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

Answer 3

Cela fonctionne pour moi:

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

ou

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 4

Essayez de passer cardStyle: { shadowColor: 'transparent' } 

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

Selon cette question Le style d'ombre par défaut de React Navigation Stack Navigator

Answer 5

J'essaie de résoudre ce problème depuis quelques heures et j'ai finalement trouvé la solution. Le problème dans mon cas était que l'en-tête se trouvait dans une position en Z différente de celle des autres composants.

essayer:

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

Answer 6

L'ombre est obtenue via l'altitude, utilisez:

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

Answer 7

Vous pouvez essayer ceci et cela a fonctionné pour moi!

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