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

Question

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

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

Answer 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 现在是扁平的

您可以read about the breaking change here

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

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