web-dev-qa-db-fra.com

React Navigation change les couleurs et le style de l'arrière-plan StackNavigator

Je suis assez nouveau pour React Native, mais j'ai une application simple et fonctionnelle avec trois scènes. Auparavant, j'utilisais Navigator, mais je me sentais à la traîne et impatient d'essayer React Navigation (comme dans https://reactnavigation.org/ ). Après avoir implémenté React Navigation, ma couleur d’arrière-plan est passée du blanc au gris et ce qui était gris au blanc. Ceci est un étrange et ne devrait pas être lié. Cependant je n'ai pas changé mes styles. J'ai seulement implémenté la nouvelle navigation et les couleurs ont changé. Quand je retourne à Navigator, mes couleurs reviennent. J'utilise StackNavigator. Quelqu'un d'autre a-t-il rencontré ce phénomène étrange?

Ou peut-être une meilleure question est: comment puis-je styler mon en-tête et la couleur d'arrière-plan dans StackNavigator de React Navigation?

javascriptreactjsreact-nativenavigationnavigator
17
Turnipdabeets

Pour styliser l'en-tête dans React Navigation, utilisez un objet d'en-tête à l'intérieur de l'objet navigationOptions:

static navigationOptions = {  
  header: {
    titleStyle: {
     /* this only styles the title/text (font, color etc.)  */
    },
    style: {
     /* this will style the header, but does NOT change the text */
    },
    tintColor: {
      /* this will color your back and forward arrows or left and right icons */
    }
  }
}

Pour styliser la backgroundColor, il vous suffit de définir la backgroundColor dans votre application, sinon vous obtiendrez la couleur par défaut.

MISE À JOUR !! À compter de mai 2017, version bêta 9, les options de navigation sont désormais plates 

Vous pouvez lire sur le changement radical ici

Vous devez supprimer les clés d'objet de l'objet en-tête. Notez également qu'ils ont été renommés. 

static navigationOptions = {
   title: 'some string title',
   headerTitleStyle: {
      /*  */
   },
   headerStyle: {
      /*  */
   },
   headerTintColor: {
      /*  */
   },
}
50
Turnipdabeets

Voici un exemple de ce que j’utilise pour changer la couleur d’arrière-plan de la carte, l’arrière-plan de l’en-tête et la couleur de la police.

/*
1. Change React Navigation background color.
- change the style backgroundColor property in the StackNavigator component
- also add a cardStyle object to the Visual options config specifying a background color
*/

//your new background color
let myNewBackgroundColor = 'teal';

const AppNavigator = StackNavigator({
  SomeLoginScreen: {
    screen: SomeLoginScreen
  }
}, {
      headerMode: 'screen', 
      cardStyle: {backgroundColor: myNewBackgroundColor
   }
});

//add the new color to the style property
class App extends React.Component {
  render() {
    return ( 
    	<AppNavigator style = {{backgroundColor: myNewBackgroundColor}} ref={nav => {this.navigator = nav;}}/>
    );
  }
}

/*
2. Change React Navigation Header background color and text color.
- change the StackNavigator navigationOptions 
*/

/*
its not clear in the docs but the tintColor 
changes the color of the text title in the 
header while a new style object changes the 
background color.
*/


//your new text color
let myNewTextColor = 'forestgreen';

//your new header background color
let myNewHeaderBackgroundColor = 'pink';

const AppNavigator = StackNavigator({
  SomeLoginScreen: {
    screen: SomeLoginScreen,
    navigationOptions: {
      title: 'Register',
      header: {
        tintColor: myNewTextColor,
        style: {
          backgroundColor: myNewHeaderBackgroundColor
        }
      },
    }
  }
}, {
     headerMode: 'screen',
     cardStyle:{backgroundColor:'red'
   }
});

20
njlaboratory

Utilisez le code ci-dessous pour créer un en-tête de navigation personnalisé.

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

Essayez ce code.

 static navigationOptions = {
        title: 'KindleJoy - Kids Learning Center',
        headerTintColor: '#ffffff',
        /*headerBackground: (
            <Image
                style={StyleSheet.absoluteFill}
                source={require('./imgs/yr_logo.png')}
            />
        ),*/
        headerStyle: {
            backgroundColor: '#1d7110',
            borderBottomColor: 'black',
            borderBottomWidth: 0,
        },
        headerTitleStyle: {
            fontSize: 18,
        }
    };
0
Yogesh Rathi