kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-03-26 09:14:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: set headerMode to screen by default when custom header is specified

Browse Source
This commit is contained in:
Satyajit Sahoo
2021-03-14 16:35:12 +01:00
parent 5bcce9926a
commit 31caaf3071
2 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
example/src/Screens/StackHeaderCustomization.tsx
View File

@@ -86,8 +86,7 @@ const AlbumsScreen = ({ navigation }: StackScreenProps<SimpleStackParams>) => {
const SimpleStack = createStackNavigator<SimpleStackParams>();
type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> &
StackScreenProps<ParamListBase>;
type Props = StackScreenProps<ParamListBase>;
function CustomHeader(props: StackHeaderProps) {
const { current, next } = props.progress;
@@ -108,7 +107,7 @@ function CustomHeader(props: StackHeaderProps) {
);
}
export default function SimpleStackScreen({ navigation, ...rest }: Props) {
export default function HeaderCustomizationScreen({ navigation }: Props) {
React.useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
@@ -119,13 +118,13 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
const [headerTitleCentered, setHeaderTitleCentered] = React.useState(true);
return (
<SimpleStack.Navigator {...rest}>
<SimpleStack.Navigator screenOptions={{ headerMode: 'float' }}>
<SimpleStack.Screen
name="Article"
component={ArticleScreen}
options={({ route }) => ({
title: `Article by ${route.params?.author}`,
header: CustomHeader,
header: (props) => <CustomHeader {...props} />,
headerTintColor: '#fff',
headerStyle: { backgroundColor: '#ff005d' },
headerBackTitleVisible: false,