web-dev-qa-db-fra.com

React Navigation; utiliser l'image dans l'en-tête?

J'utilise Reaction Navigation dans un projet natif React et je souhaite personnaliser l'en-tête avec une image.

Pour une couleur, je peux utiliser un style simple, mais comme react native ne prend pas en charge les images d'arrière-plan, j'ai besoin d'une solution différente.

reactjsreact-nativereact-navigation
8
Koen.

Mise à jour:

Depuis la v2 de la bibliothèque, il existe une option spéciale pour définir l'arrière-plan de l'en-tête, à savoir headerBackground.

Cette option accepte un composant React, donc lorsqu'elle est définie sur un composant Image, elle l'utilisera.

Par exemple:

export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
}, {
  navigationOptions: {
    headerBackground: (
      <Image
        style={StyleSheet.absoluteFill}
        source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }}
      />
    ),
  }
});

Exemple de travail: https://snack.expo.io/@koen/react-navigation-header-background

Ancienne réponse, lorsque vous utilisez toujours React Navigation v1:

La création d'un en-tête personnalisé avec une image est en fait très simple.

En enveloppant l'en-tête avec une vue et en plaçant une image positionnée absolue dans cette vue, l'image sera mise à l'échelle à sa taille parent.

L'important est de définir le backgroundColor de l'en-tête par défaut sur transparent.

const ImageHeader = props => (
  <View style={{ backgroundColor: '#eee' }}>
    <Image
      style={StyleSheet.absoluteFill}
      source={{ uri: 'https://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg' }}
    />
    <Header {...props} style={{ backgroundColor: 'transparent' }}/>
  </View>
);

Et puis utilisez ce composant comme en-tête:

const SimpleStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
}, {
  navigationOptions: {
    headerTitleStyle: { color: '#fff' },
    header: (props) => <ImageHeader {...props} />,
  }
});

Ce qui entraînerait:

16
Koen.