小编典典

反应导航切换背景颜色和样式StackNavigator

reactjs

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

也许更好的问题是:如何在React Navigation的StackNavigator中设置标题和背景颜色?


阅读 435

收藏
2020-07-22

共1个答案

小编典典

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

backgroundColor为设置样式,您只需backgroundColor在应用中设置即可,否则将获得默认颜色。

更新! 截至2017年5月beta9以来,navigationOptions现在持平

您可以在此处了解重大变化

您需要从标题对象中删除对象键。另外,请注意它们已被重命名。

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