問(wèn)題描述

我是 React Native 的新手，但我有一個(gè)簡(jiǎn)單的工作應(yīng)用程序，其中包含三個(gè)場(chǎng)景.我以前使用過(guò) Navigator，但感覺(jué)很慢，很高興嘗試 React Navigation(如 https://reactnavigation.org/).實(shí)施 React Navigation 后，我的背景顏色從白色變?yōu)榛疑瑥幕疑優(yōu)榘咨?這很奇怪，不應(yīng)該相關(guān).但是我沒(méi)有改變我的風(fēng)格.我只實(shí)現(xiàn)了新的導(dǎo)航并且顏色改變了.當(dāng)我回到 Navigator 時(shí)，我的顏色又回來(lái)了.我正在使用 StackNavigator.有沒(méi)有其他人遇到過(guò)這種奇怪的現(xiàn)象?

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?

或者更好的問(wèn)題是:如何在 React Navigation 的 StackNavigator 中設(shè)置標(biāo)題和背景顏色的樣式?

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

推薦答案

要在 React Navigation 中設(shè)置標(biāo)題樣式，請(qǐng)?jiān)?navigationOptions 對(duì)象中使用標(biāo)題對(duì)象:

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

要設(shè)置 backgroundColor 的樣式，您只需在應(yīng)用中設(shè)置 backgroundColor 否則您將獲得默認(rèn)顏色.

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

更新！！從 2017 年 5 月 beta9 開(kāi)始，navigationOptions 現(xiàn)在是平的

您可以在此處閱讀有關(guān)重大更改的信息

您需要從標(biāo)頭對(duì)象中刪除對(duì)象鍵.另外，請(qǐng)注意它們已被重命名.

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

這篇關(guān)于React Navigation 切換背景顏色和樣式 StackNavigator的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！