React Navigation切换背景颜色和样式StackNavigator [英] React Navigation switching background colors and styling StackNavigator

问题描述

我对React Native很新，但我有一个简单的工作应用程序，有三个场景。我之前使用过Navigator，但感觉很迟钝，很高兴尝试使用React Navigation（如 https://reactnavigation.org/）。实施React Navigation后，我的背景颜色从白色变为灰色，灰色变为白色。这是一个奇怪的，不应该相关。但是我并没有改变我的风格。我只实现了新的导航并改变了颜色。当我恢复到导航器时，我的颜色会恢复。我正在使用StackNavigator。还有其他人遇到过这种奇怪现象吗？

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 Navigation的StackNavigator中设置标题和背景颜色？

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

推荐答案

要在React Navigation中设置标题样式，请使用navigationOptions对象中的标题对象：

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

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

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

更新!!截至2017年5月beta9，navigationOptions现已持平

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

您可以阅读此处的重大变化

你需要从头对象中删除对象键。另外，请注意它们已被重命名。

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

这篇关于React Navigation切换背景颜色和样式StackNavigator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！