web-dev-qa-db-fra.com

Fond transparent pour l'en-tête à l'aide de createStackNavigator, React Native

J'ai créé un projet en utilisant CRNA qui utilise React-Navigation. Dans l'un des écrans, j'ai une image d'arrière-plan qui couvre tout l'écran et je veux inclure l'en-tête.

Comme cette image:

enter image description here

Dois-je simplement masquer l'en-tête et utiliser une vue qui contient l'élément que je veux? Si oui, cela causera-t-il des problèmes en cas de lien profond?

Solution

React Navigation propose des accessoires sympas appelés headerTransparent qui peuvent être utilisés pour rendre quelque chose sous l'en-tête.

Le code devrait donc ressembler à ceci:

static navigationOptions = {
    headerTransparent: true
  }
react-nativereact-navigation
6
woft

Pour obtenir cet effet, vous devez suivre ces étapes:

  1. Modifiez le style de l'en-tête de navigation avec une position absolue, un fond transparent et sans bordure.
  2. Utilisez le composant ImageBackground comme composant parent pour votre écran avec l'image que vous souhaitez utiliser comme arrière-plan.
  3. Ajoutez un haut de rembourrage à ce ImageBackground pour corriger le chevauchement.

Votre code devrait donc ressembler à ceci:

import React, {Component} from 'react';
import {
  StyleSheet,
  Button,
  ImageBackground,
  Platform,
} from 'react-native';
import {
  createStackNavigator,
} from 'react-navigation';


class HomeScreen extends Component {
  render() {
    return (
        <ImageBackground
            style={styles.container}
            source={require('./images/bg.png')}
        >
          <Button
              onPress={() => {}}
              title="Just a button"
          />
        </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Platform.OS === 'ios' ? 60 : 80,
  }
});

const App = createStackNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home',
      headerStyle: {
        position: 'absolute',
        backgroundColor: 'transparent',
        zIndex: 100,
        top: 0,
        left: 0,
        right: 0,
        elevation: 0,
        shadowOpacity: 0,
        borderBottomWidth: 0,
      }
    },
  }
})

export default App;
1
Naoufal

Solution:

navigationOptions: {
    headerTransparent: {
      position: 'absolute',
      backgroundColor: 'transparent',
      zIndex: 100,
      top: 0,
      left: 0,
      right: 0
    }
1
Ali Akram