(1)将选项配置变成函数,根据传递的参数动态改变标题
<Stack.Screen
name="xx"
component={x}
options={({ route }) => ({ title: route.params.name })}
/>
(2)通过navigate更改路由组件信息
onPress={() => navigation.setOptions({ title: 'Updated!' })}
(3)设置路由导航栏样式
<Stack.Screen
name="xx"
component={xx}
options={{
title:'x',
headerStyle: {设置整个页眉样式},
headerTintColor: '后退和标题颜色',
headerTitleStyle: {标题字体样式},
headerBackImage:require('xx')/uri,
}}
/>
(4)设置路由导航栏通用样式screenOptions
<Stack.Navigator
screenOptions={{
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}}
>
...
</Stack.Navigator>
(5)设置标题为图片
headerTitle接收一个组件作为标题,所以该组件必须返回<Image/>
<Stack.Screen name='x'component={x} options={{ headerTitle: ()=> <Header /> }}/>
function Header() {
return (
<Image
style={{ width: 50, height: 50 }}
source={require('./img/钢铁侠4.jpg')}
/>
);
}
(6)设置导航栏右侧按钮,options内的this改变了指向
<Stack.Screen
name="A"
component={A}
options={{
headerRight: () => (
<Button
onPress={() => alert('This is a button!')}
title="Info"
color="blue"
/>
),
}}
/>
更多导航栏配置信息:
顶部导航配置