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

2022-01-10 00:00:00 reactjs navigation javascript react-native navigator

我是 React Native 的新手，但我有一个简单的工作应用程序，其中包含三个场景.我以前使用过 Navigator，但感觉很慢，很高兴尝试 React Navigation(如 https://reactnavigation.org/).实施 React Navigation 后，我的背景颜色从白色变为灰色，从灰色变为白色.这很奇怪，不应该相关.但是我没有改变我的风格.我只实现了新的导航并且颜色改变了.当我回到 Navigator 时，我的颜色又回来了.我正在使用 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 现在是平的

您可以在此处阅读有关重大更改的信息

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

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

相关文章