wake-up-neo.com

Reagieren Sie die Navigation, indem Sie die Hintergrundfarben wechseln und den StackNavigator gestalten

Ich bin relativ neu bei React Native, aber ich habe eine einfache App mit drei Szenen. Ich habe vorher Navigator verwendet, aber es fühlte sich hinterher an und ich freute mich, React Navigation auszuprobieren (wie in https://reactnavigation.org/ ). Nach der Implementierung von React Navigation wechselte meine Hintergrundfarbe von weiß zu grau und was grau zu weiß war. Das ist seltsam und sollte nicht miteinander in Verbindung stehen. Ich habe jedoch meine Stile nicht geändert. Ich habe nur die neue Navigation implementiert und die Farben geändert. Wenn ich zu Navigator zurückkehre, kehren meine Farben zurück. Ich verwende StackNavigator. Hat jemand dieses seltsame Phänomen getroffen?

Oder vielleicht eine bessere Frage: Wie stelle ich meine Kopf- und Hintergrundfarbe in StackNavigator von React Navigation?

javascriptreactjsreact-nativenavigationnavigator
17
Turnipdabeets

Um den Header in React Navigation zu formatieren, verwenden Sie ein Header-Objekt innerhalb des navigationOptions-Objekts:

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 */
    }
  }
}

Um das backgroundColor zu stylen, musst du nur das backgroundColor in deiner App einstellen, sonst erhältst du die Standardfarbe.

UPDATE !! Ab Mai 2017 Beta9 sind die navigationOptions jetzt flach

Sie können lesen Sie über die Änderung hier

Sie müssen die Objektschlüssel aus dem Kopfobjekt entfernen. Beachten Sie auch, dass sie umbenannt wurden.

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

Hier ist ein Beispiel für das, was ich verwende, um die Kartenhintergrundfarbe und den Hintergrund für den Header und die Schriftfarbe zu ändern.

/*
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

Verwenden Sie den folgenden Code, um einen benutzerdefinierten Navigationsheader zu erstellen

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

Versuchen Sie diesen 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