![](/img/trans.png)
[英]Header title not changing with bottom navigation React Native Navigation v5
[英]Passing title from React Native navigation to Header Component
我試圖將每個頁面的標題從反應導航傳遞給 header 組件,但沒有運氣。 我很確定我正確地發送了道具,但我不知道如何使用我嘗試使用 {props.headerTitle} 但沒有運氣。
Header 組件:
export default function Header() {
return (
<View style={styles.header}>
<Text>{props.headerTitle}</Text>
</View>
);
}
導航
<AuthStack.Navigator initialRouteName={RegisterLogin}>
<AuthStack.Screen
name="RegisterLogin"
component={RegisterLogin}
options={({navigation, route}) => ({
headerShown: false,
headerTitle: (props) => <Header {...props} />,
headerStyle: {
backgroundColor: 'red',
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
},
})}
/>
<AuthStack.Screen
name="Login"
component={LoginWithContext}
options={({navigation, route}) => ({
headerTitle: (props) => <Header {...props} />,
headerStyle: {
backgroundColor: 'red',
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
},
})}
/>
我不太確定您要完成什么。 當您像這樣設置標題選項時,React Navigation 標題默認顯示頁面標題:
<AuthStack.Screen
name="RegisterLogin"
component={RegisterLogin}
options={{
title: 'Your title here',
headerStyle: {
backgroundColor: 'red',
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
}
}}
/>
這里有你想要的不同行為嗎?
編輯:假設您嘗試將標題傳遞給 header 組件以獲取更多自定義行為,您可以這樣做:
// Header Component
function Header({children}) {
return (
<View>
<Text>{children}</Text>
</View>
);
}
// In your navigator
<AuthStack.Screen
name="RegisterLogin"
component={RegisterLogin}
options={{
title: 'Your title here',
headerTitle: (children) => <Header {...children}/>,
headerStyle: {
backgroundColor: 'red',
elevation: 0,
shadowOpacity: 0,
borderBottomWidth: 0,
}
}}
/>
請參閱headerTitle
上的文檔: https://reactnavigation.org/docs/stack-navigator/#headertitle
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.