我是React Native的新手，但我有一个简单的三个场景的工作应用程序。我之前使用的是导航器，但它感觉很迟钝，很高兴能够尝试使用React Navigation（如https://reactnavigation.org/）。实施React Navigation后，我的背景色从白色切换到灰色，灰色到白色。这是一个奇怪的，不应该有关系。但是我没有改变我的风格。我只实现了新的导航和改变了颜色。当我恢复到导航器时，我的颜色返回。我正在使用StackNavigator。有没有人遇到过这种奇怪的现象？React导航切换背景颜色和样式StackNavigator
或者更好的问题是：如何在React Navigation的StackNavigator中设置我的标题和背景颜色？
款式在阵营导航使用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的navigationOptions现在是平
您可以阅读有关重大更改的位置：https://github.com/react-community/react-navigation/releases/tag/v1.0.0-beta.9
你需要从标题对象中删除的对象键。另外，请注意它们已被重命名。
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 (
\t <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,
},
};