React Navigation switching background colors and s

问题:

I'm fairly new to React Native, but I have a simple working app with three scenes. I was previously using Navigator but it felt laggy and was excited to try out React Navigation (as in https://reactnavigation.org/). After implementing React Navigation, my background color switched from white to grey, and what was grey to white. This is a strange and shouldn't be related. However I didn't change my styles. I only implemented the new navigation and the colors changed. When I revert back to Navigator my colors return. I'm using StackNavigator. Has anyone else encountered this strange phenomenon?

Or maybe a better question is : how do I style my header and background color in React Navigation's StackNavigator?

回答1:

To style the header in React Navigation use a header object inside the navigationOptions object:

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

For styling the backgroundColor, you just need to set the backgroundColor in your app otherwise you'll get the default color.

UPDATE!! As of May 2017 beta9 the navigationOptions are now flat

You can read about the breaking change here

You need to remove the object keys from the header object. Also, notice they have been renamed.

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

回答2:

Here is an example of what I am using to change the card background color and Header background and font color.

/*
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'
   }
});

回答3:

Use below code to create custom navigation header

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

回答4:

Try this 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,
        }
    };