web-dev-qa-db-fra.com

React Natif, change React Style des en-têtes de navigation

J'implémente React Navigation dans mon React application native, et je souhaite modifier les couleurs d'arrière-plan et de premier plan de l'en-tête. J'ai les éléments suivants:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { StackNavigator } from 'react-navigation';

export default class ReactNativePlayground extends Component {

  static navigationOptions = {
    title: 'Welcome',
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.Android.js
        </Text>
        <Text style={styles.instructions}>
          Double tap R on your keyboard to reload,{'\n'}
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

const SimpleApp = StackNavigator({
  Home: { screen: ReactNativePlayground }
});

AppRegistry.registerComponent('ReactNativePlayground', () => SimpleApp);

Par défaut, la couleur d'arrière-plan de l'en-tête est blanche, avec un avant-plan noir. J'ai également consulté la documentation de React Navigation), mais je ne parviens pas à trouver où cela montre comment définir le style. Vous avez de l'aide?

javascriptreactjsreact-nativereact-navigation
15
user818700

Dans les versions plus récentes de React Navigation, vous avez un objet de paramétrage plus plat, comme ci-dessous:

static navigationOptions = {
  title: 'Chat',
  headerStyle: { backgroundColor: 'red' },
  headerTitleStyle: { color: 'green' },
}

Réponse obsolète:

Selon la documentation, ici , vous modifiez l'objet navigationOptions. Essayez quelque chose comme:

static navigationOptions = {
    title: 'Welcome',
    header: {
        style: {{ backgroundColor: 'red' }},
        titleStyle: {{ color: 'green' }},
    }
}

S'il vous plaît, ne finissez pas par utiliser ces couleurs!

28
cssko

Selon la documentation, vous pouvez utiliser le style "navigationOptions" comme celui-ci.

static navigationOptions = {
  title: 'Chat',
  headerStyle:{ backgroundColor: '#FFF'},
  headerTitleStyle:{ color: 'green'},
}

Pour plus d'informations sur les options de navigation, vous pouvez également consulter la documentation: -

https://reactnavigation.org/docs/navigators/stack#Screen-Navigation-Options

14
Vishal Dhaduk

Remarquer! navigationOptions est la différence entre Stack Navigation et Drawer Navigation
Navigation de pile résolue.
Mais pour la navigation dans les tiroirs, vous pouvez ajouter votre propre en-tête et créer vos styles avec contentComponent Config:
Première import { DrawerItems, DrawerNavigation } from 'react-navigation' Ensuite

En-tête avant DrawerItems:

contentComponent: props => <ScrollView><Text>Your Own Header Area Before</Text><DrawerItems {...props} /></ScrollView>.

Header Before DrawerItems

Pied de page après DrawerItems:

contentComponent: props => <ScrollView><DrawerItems {...props} /><Text>Your Own Footer Area After</Text></ScrollView>.

2
Sedric Heidarizarei

Essayez ce code:

static navigationOptions = {
    headerTitle: 'SignIn',
    headerTintColor: '#F44336'
};

bonne chance!

1
Daniel Agus Sidabutar

Essayez ce code de travail

static navigationOptions = {
      title: 'Home',
      headerTintColor: '#ffffff',
      headerStyle: {
        backgroundColor: '#2F95D6',
        borderBottomColor: '#ffffff',
        borderBottomWidth: 3,
      },
      headerTitleStyle: {
        fontSize: 18,
      },
  };
1
omprakash8080