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

时间:2023-01-06
本文介绍了React Navigation 切换背景颜色和样式 StackNavigator的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

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

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

上一篇:Ruby on Rails 键盘快捷键 下一篇:Node.js、Express、EJS - 导航中当前页面上的活动类

相关文章

最新文章