Réagir à la Navigation changer les couleurs de fond et le style StackNavigator

Je suis assez nouveau pour réagir natif, mais j'ai une application simple de travail avec trois scènes. J'utilisais précédemment Navigator mais il se sentait lent et était excité d'essayer React Navigation (comme dans https://reactnavigation.org/). Après avoir implémenté la Navigation React, ma couleur de fond est passée du blanc au gris, et ce qui était gris au blanc. C'est étrange et ça ne devrait pas être lié. Cependant, je n'ai pas changer mon style. J'ai seulement implémenté la nouvelle navigation et les couleurs ont changé. Quand je reviens à Navigator, mes couleurs reviennent. J'utilise StackNavigator. Quelqu'un d'autre a rencontré ce phénomène étrange?

ou peut-être une meilleure question Est : Comment dois-je styliser mon en-tête et la couleur de fond dans le StackNavigator de React Navigation?

16
demandé sur Turnipdabeets 2017-02-16 01:08:06

4 réponses

Pour le style de l'en-tête de Réagir de Navigation utiliser un en-tête de l'objet à l'intérieur de la navigationOptions objet:

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 le style backgroundColor, vous avez juste besoin de mettre le backgroundColor dans votre application, autrement, vous obtiendrez la couleur par défaut.

mise à jour!! En mai 2017 beta9 les options de navigation sont maintenant à plat

Vous pouvez lire à propos du changement de rupture ici

vous devez supprimer les touches objet de l'en-tête de l'objet. Aussi, remarquez qu'ils ont été renommés.

static navigationOptions = {
   title: 'some string title',
   headerTitleStyle: {
      /*  */
   },
   headerStyle: {
      /*  */
   },
   headerTintColor: {
      /*  */
   },
}
46
répondu Turnipdabeets 2018-05-24 21:15:15

voici un exemple de ce que j'utilise pour changer la couleur de fond de carte et L'en-tête de fond et la couleur de 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
répondu njlaboratory 2017-02-25 21:19:16

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
répondu omprakash8080 2018-01-18 12:31:24

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
répondu Yogesh Rathi 2018-07-25 10:17:00