React Navigation switching background colors and styling StackNavigator(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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:React Navigation 切换背景颜色和样式 StackNavigator
基础教程推荐
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 动态更新多个选择框 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 我什么时候应该在导入时使用方括号 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06