Javascript React Navigation 切换背景颜色和样式 StackNavigator

React Navigation switching background colors and styling StackNavigator

提问by Turnipdabeets

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?

我是 React Native 的新手，但我有一个简单的工作应用程序，包含三个场景。我之前使用过 Navigator，但感觉很慢，很高兴尝试 React Navigation（如https://reactnavigation.org/ 中所示）。实现 React Navigation 后，我的背景颜色从白色变为灰色，灰色变为白色。这很奇怪，不应该相关。但是我没有改变我的风格。我只实现了新的导航并且颜色发生了变化。当我恢复到 Navigator 时，我的颜色又回来了。我正在使用 StackNavigator。有没有其他人遇到过这种奇怪的现象？

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

或者更好的问题是：如何在 React Navigation 的 StackNavigator 中设置标题和背景颜色的样式？

回答by Turnipdabeets

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

要在 React Navigation 中设置标题的样式，请使用 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 */
    }
  }
}

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

对于 样式backgroundColor，您只需要backgroundColor在您的应用程序中设置 ，否则您将获得默认颜色。

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

更新！！截至 2017 年 5 月 beta9，导航选项现在是平坦的

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: {
      /*  */
   },
}

回答by njlaboratory

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

回答by omprakash8080

Use below code to create custom navigation header

使用以下代码创建自定义导航标题

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

回答by Yogesh Rathi

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

回答by Jay Mayu

Ok nothing worked for me, so I managed to figure out my own solution

好吧，没有什么对我有用，所以我设法找出了我自己的解决方案

static navigationOptions = ({ navigation, screenProps }) => ({
        headerLeft: (
              <NavBackButton onPress={() => { navigation.goBack(); }} />
        ),headerStyle: {
            backgroundColor: CLColors.MAIN_BLUE
        }, 
        headerTitle: <Text style={[CLStyles.H6MEDIUM_WHITE, {marginLeft:8}]}>Profile</Text>
        , footer: null,
     });

headerTitlewill do the magic to place a custom Textelement here.

headerTitle将在Text这里放置自定义元素。

headerStylewill do the magic to change the background color of your navbar.

headerStyle将神奇地改变导航栏的背景颜色。

headerLeftwill help you to customize your back button.

headerLeft将帮助您自定义后退按钮。