web-dev-qa-db-fra.com

React Navigation - Couleur dégradée pour l'en-tête

J'utilise React Navigation dans React Native app et je veux changer le backgroundColor pour que l'en-tête soit dégradé et j'ai découvert qu'il y a un module de nœud: réagir-natif-gradient linéaire pour obtenir un gradient dans réagir natif

j'ai Root StackNavigator comme ça:

const Router = StackNavigator({

Login: {
    screen: Login,
    navigationOptions: ({navigation}) => ({
       headerTitle: <Text>SomeTitle</Text>
       headerLeft: <SearchAndAgent />,
       headerRight: <TouchableOpacity
        onPress={() => { null }
    </TouchableOpacity>,
    headerStyle: { backgroundColor: '#005D97' },
    }),
},
});

je peux envelopper le texte ou la vue pour être dégradé comme ça:

<LinearGradient colors={['#3076A7', '#19398A']}><Text style={styles.title}>{title}</Text></LinearGradient>,

comment puis-je envelopper l'arrière-plan de l'en-tête dans les options de navigation pour utiliser le module LinearGradient?

je sais que je peux créer un composant d'en-tête personnalisé et l'utiliser, mais quand je le fais, toutes les animations de navigation natives de React La navigation ne fonctionne pas comme l'animation de titre entre deux routes, donc ça ne m'aide pas.

merci pour ton aide !

reactjsreact-nativereact-navigation
13
Eran Abir

La solution de Mark P était bonne mais maintenant vous devez définir headerStyle et y faire le positionnement absolu:

navigationOptions: {
  header: props => <GradientHeader {...props} />,
  headerStyle: {
    backgroundColor: 'transparent',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
},

et le GradientHeader:

const GradientHeader = props => (
<View style={{ backgroundColor: '#eee' }}>
    <LinearGradient
      colors={['red', 'blue']}
      style={[StyleSheet.absoluteFill, { height: Header.HEIGHT }]}
    >
      <Header {...props} />
    </LinearGradient>
  </View>
)
6
Jobeso

Juste pour votre information, maintenant avec les accessoires headerBackground c'est plus facile.

Vous pouvez avoir un en-tête dégradé juste en faisant ceci:

navigationOptions: {
  headerBackground: (
    <LinearGradient
      colors={['#a13388', '#10356c']}
      style={{ flex: 1 }}
      start={{x: 0, y: 0}}
      end={{x: 1, y: 0}}
    />
  ),
  headerTitleStyle: { color: '#fff' },
}

Cette solution fonctionne bien même avec SafeArea pour IosX

25
Steeve Pitis

Similaire à ce problème: React Navigation; utiliser l'image dans l'en-tête?

Pour un dégradé linéaire, vous feriez simplement>

//imports

import { Image, StyleSheet, View } from 'react-native';
import { Header } from 'react-navigation' ;
import LinearGradient from 'react-native-linear-gradient';

//header

Créez le composant En-tête enveloppé dans le dégradé linéaire. en faisant l'en-tête backgroundColor: 'transparent' vous montrerez ensuite le dégradé linéaire en l'enveloppant.

const GradientHeader = props => (
  <View style={{ backgroundColor: '#eee' }}>
    <LinearGradient
      colors={['#00a8c3', '#00373f']}
      style={[StyleSheet.absoluteFill, styles.linearGradient]}
    />
    <Header {...props} style={{ backgroundColor: 'transparent' }}/>
  </View>
);

Renvoie l'écran avec l'en-tête étant votre composant GradientHeader.

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

Devrait ressembler à ceci avec le code ci-dessus.

En-tête dégradé

4
Mark P

Vous pouvez utiliser le composant LinearGradient depuis l'expo. C'est un composant utile et vous ne pouvez pas installer une autre bibliothèque comme react-native-linear-gradient. https://docs.expo.io/versions/latest/sdk/linear-gradient/ . Au fait, vous pouvez changer le bouton de retour. C'est facile.

Vous pouvez l'implémenter sur l'écran intérieur avec des options de navigation comme ça

static navigationOptions = ({ navigation }: any) => {
  const onGoBack = () => navigation.goBack();
  return {
    header: (props: any) => <GradientHeader {...props} />,
    headerStyle: { height: 68, backgroundColor: "transparent", color: colors.white },
    headerTitle: "Sign Up",
    headerTitleStyle: { color: colors.white, fontSize: 18 },
    headerLeft: (
      <TouchableOpacity style={{ width: 32, height: 32, paddingLeft: 8 }} onPress={onGoBack}>
        <Image source={images.back} resizeMode="center" style={{ width: 32, height: 32 }} />
      </TouchableOpacity>
    ),
  };
};
0
Gapur Kassym