导航栏的配置也是一项必学知识点。修改导航栏标题、背景色、样式、新增元素等。
一、设置标题
首先，导航栏的标题可通过options属性来设置。
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={
HomeScreen}
options={
{
title: 'My home' }}
/>
</Stack.Navigator>
);
}
上面代码中，title的值即为HomeScreen页面的标题。
另外一种，通过参数设置标题：
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={
HomeScreen}
options={
{
title: 'My home' }}
/>
<Stack.Screen
name="Profile"
component={
ProfileScreen}
options={
({
route }) => ({
title: route.params.name })}
/>
</Stack.Navigator>
);
}
在上一篇文章中，我们讲过了页面跳转传参。所以我们可以使用参数来设置跳转页面的标题： options={({ route }) => ({ title: route.params.name })} ，这一句是固定写法，只有后面的name是你的参数名。
二、修改标题
在上面两块代码中，你都可以看到我们是通过options来设置的标题，那么修改标题显而易见是通过setOptions来修改。这和setState类似。
<Button
title="Update the title"
onPress={
() => navigation.setOptions({
title: 'Updated!' })}
/>
三、修改导航栏样式
定制顶部导航栏的风格时，有三个关键性能用途：headerStyle，headerTintColor，和headerTitleStyle。
- headerStyle：样式对象，该对象将应用于View封装标题的。如果设置backgroundColor，那将是标题的颜色。
- headerTintColor：后退按钮和标题都使用此属性作为其颜色。在下面的示例中，我们将颜色设置为白色（#fff），因此后退按钮和标题标题将为白色。
- headerTitleStyle：如果要自定义标题的fontFamily，fontWeight以及其他Text样式属性，则可以使用此功能。
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={
HomeScreen}
options={
{
title: 'My home',
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
/>
</Stack.Navigator>
);
}
四、修改标题文本为图片或者按钮
function LogoTitle() {
return (
<Image
style={
{
width: 50, height: 50 }}
source={
require('@expo/snack-static/react-native-logo.png')}
/>
);
}
function StackScreen() {
return (
<Stack.Navigator>
<Stack.Screen
name="Home"
component={
HomeScreen}
options={
{
headerTitle: props => <LogoTitle {
...props} /> }}
/>
</Stack.Navigator>
);
}
标题为按钮或者图片取决于LogoTitle()函数返回的组件内容。这个示例返回Image，则标题位子将改为一个图片。
五、自定义导航栏及全屏模式
function HomeScreen({
navigation }) {
return (
<View style={
{
flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={
{
fontSize: 30 }}>This is the home screen!</Text>
<Button
onPress={
() => navigation.navigate('MyModal')}
title="Open Modal"
/>
</View>
);
}
function DetailsScreen() {
return (
<View>
<Text>Details</Text>
</View>
);
}
function ModalScreen({
navigation }) {
return (
<View style={
{
flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={
{
fontSize: 30 }}>This is a modal!</Text>
<Button onPress={
() => navigation.goBack()} title="Dismiss" />
</View>
);
}
const MainStack = createStackNavigator();
const RootStack = createStackNavigator();
function MainStackScreen() {
return (
<MainStack.Navigator>
<MainStack.Screen name="Home" component={
HomeScreen} />
<MainStack.Screen name="Details" component={
DetailsScreen} />
</MainStack.Navigator>
);
}
function RootStackScreen() {
return (
<RootStack.Navigator mode="modal" headerMode="none">
<RootStack.Screen name="Main" component={
MainStackScreen}/>
<RootStack.Screen name="MyModal" component={
ModalScreen} />
</RootStack.Navigator>
);
}
其中headerMode="none"属性可以隐藏导航栏从而使页面组件达到全屏模式。
全屏模式一般也会有相应的导航栏，可能是动态，也可能是更加好看的亦或者导航栏里包含其他组件。这些就需要自定义导航栏了，你可以单独一个文件中写导航栏组件，然后在需要的界面中进行引入就OK啦，很简单的内容。
有问题可以留言，一起讨论解决~