我是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,
},
};