我对React Native很新,但我有一个简单的工作应用程序,有三个场景。我之前使用的是Navigator,但感觉很迟钝,很高兴尝试React Navigation(如https://reactnavigation.org/中所述)。实施React Navigation后,我的背景颜色从白色变为灰色,灰色变为白色。这是一个奇怪的,不应该相关。但是我并没有改变我的风格。我只实现了新的导航并改变了颜色。当我恢复到导航器时,我的颜色会恢复。我正在使用StackNavigator。还有其他人遇到过这种奇怪的现象吗?
或许更好的问题是:如何在React Navigation的StackNavigator中设置标题和背景颜色?
答案 0 :(得分:53)
要在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
,否则您将获得默认颜色。
<强> UPDATE !!截至2017年5月beta9,navigationOptions现已持平
你可以read about the breaking change here
您需要从标题对象中删除对象键。另外,请注意它们已被重命名。
static navigationOptions = {
title: 'some string title',
headerTitleStyle: {
/* */
},
headerStyle: {
/* */
},
headerTintColor: {
/* */
},
}
答案 1 :(得分:21)
以下是我用来更改卡背景颜色和标题背景和字体颜色的示例。
/*
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'
}
});
&#13;
答案 2 :(得分:3)
使用以下代码创建自定义导航标题
static navigationOptions = {
title: 'Home',
headerTintColor: '#ffffff',
headerStyle: {
backgroundColor: '#2F95D6',
borderBottomColor: '#ffffff',
borderBottomWidth: 3,
},
headerTitleStyle: {
fontSize: 18,
},
};
答案 3 :(得分:1)
我认为以上所有答案都无法在react-navigation 5
中为我解决,因此,我将其设为自己的解决方案并与您分享
只需更改theme
中react-navigation 5
的背景,就可以了。
import React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
const MainNavigator = () => {
const MyTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: '#FFF',
},
};
return (
<NavigationContainer theme={MyTheme}>
...
</NavigationContainer>
);
};
export default MainNavigator;
答案 4 :(得分:0)
尝试此代码。
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,
}
};
答案 5 :(得分:0)
好,对我没有任何帮助,所以我设法找到了自己的解决方案
static navigationOptions = ({ navigation, screenProps }) => ({
headerLeft: (
<NavBackButton onPress={() => { navigation.goBack(); }} />
),headerStyle: {
backgroundColor: CLColors.MAIN_BLUE
},
headerTitle: <Text style={[CLStyles.H6MEDIUM_WHITE, {marginLeft:8}]}>Profile</Text>
, footer: null,
});
headerTitle
将神奇地在此处放置自定义Text
元素。
headerStyle
将神奇地改变导航栏的背景颜色。
headerLeft
将帮助您自定义后退按钮。