web-dev-qa-db-fra.com

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

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

react-nativereact-navigation
10
GollyJer

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 .

9
GollyJer

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,
    }
  }
});
6
spaceemotion

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
        }
    }
);
3
zarcode

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

2
Greg Benner

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
  }
}
0
Jonathan Bencomo

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

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

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
      }
    }
  }
});
0
Bye Webster