我是 React Native 的新手，但我有一个包含三个场景的简单工作应用程序。我以前使用过 Navigator，但感觉很慢，很高兴尝试 React Navigation（如在https://reactnavigation.org/ 中）。实现 React Navigation 后，我的背景颜色从白色变为灰色，灰色变为白色。这很奇怪，不应该相关。但是我没有改变我的风格。我只实现了新的导航并且颜色发生了变化。当我恢复到 Navigator 时，我的颜色又回来了。我正在使用 StackNavigator。有没有其他人遇到过这种奇怪的现象？
或者更好的问题是：如何在 React Navigation 的 StackNavigator 中设置标题和背景颜色的样式？
要在 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，导航选项现在是平坦的
您需要从标题对象中删除对象键。另外，请注意它们已被重命名。
static navigationOptions = {
title: 'some string title',
headerTitleStyle: {
/* */
},
headerStyle: {
/* */
},
headerTintColor: {
/* */
},
}
这是我用来更改卡片背景颜色和标题背景和字体颜色的示例。
/*
1. Change React Navigation background color.
- change the style backgroundColor property in the StackNavigator component
- also add a cardStyle object to the Visual options config specifying a background color
*/
//your new background color
let myNewBackgroundColor = 'teal';
const AppNavigator = StackNavigator({
SomeLoginScreen: {
screen: SomeLoginScreen
}
}, {
headerMode: 'screen',
cardStyle: {backgroundColor: myNewBackgroundColor
}
});
//add the new color to the style property
class App extends React.Component {
render() {
return (
<AppNavigator style = {{backgroundColor: myNewBackgroundColor}} ref={nav => {this.navigator = nav;}}/>
);
}
}
/*
2. Change React Navigation Header background color and text color.
- change the StackNavigator navigationOptions
*/
/*
its not clear in the docs but the tintColor
changes the color of the text title in the
header while a new style object changes the
background color.
*/
//your new text color
let myNewTextColor = 'forestgreen';
//your new header background color
let myNewHeaderBackgroundColor = 'pink';
const AppNavigator = StackNavigator({
SomeLoginScreen: {
screen: SomeLoginScreen,
navigationOptions: {
title: 'Register',
header: {
tintColor: myNewTextColor,
style: {
backgroundColor: myNewHeaderBackgroundColor
}
},
}
}
}, {
headerMode: 'screen',
cardStyle:{backgroundColor:'red'
}
});
使用以下代码创建自定义导航标题
static navigationOptions = {
title: 'Home',
headerTintColor: '#ffffff',
headerStyle: {
backgroundColor: '#2F95D6',
borderBottomColor: '#ffffff',
borderBottomWidth: 3,
},
headerTitleStyle: {
fontSize: 18,
},
};
试试这个代码。
static navigationOptions = {
title: 'KindleJoy - Kids Learning Center',
headerTintColor: '#ffffff',
/*headerBackground: (
<Image
style={StyleSheet.absoluteFill}
source={require('./imgs/yr_logo.png')}
/>
),*/
headerStyle: {
backgroundColor: '#1d7110',
borderBottomColor: 'black',
borderBottomWidth: 0,
},
headerTitleStyle: {
fontSize: 18,
}
};