kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-04-29 21:05:29 +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>(); const SimpleStack = createStackNavigator<SimpleStackParams>();
type Props = Partial<React.ComponentProps<typeof SimpleStack.Navigator>> & type Props = StackScreenProps<ParamListBase>;
StackScreenProps<ParamListBase>;
function CustomHeader(props: StackHeaderProps) { function CustomHeader(props: StackHeaderProps) {
const { current, next } = props.progress; 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(() => { React.useLayoutEffect(() => {
navigation.setOptions({ navigation.setOptions({
headerShown: false, headerShown: false,
@@ -119,13 +118,13 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
const [headerTitleCentered, setHeaderTitleCentered] = React.useState(true); const [headerTitleCentered, setHeaderTitleCentered] = React.useState(true);
return ( return (
<SimpleStack.Navigator {...rest}> <SimpleStack.Navigator screenOptions={{ headerMode: 'float' }}>
<SimpleStack.Screen <SimpleStack.Screen
name="Article" name="Article"
component={ArticleScreen} component={ArticleScreen}
options={({ route }) => ({ options={({ route }) => ({
title: `Article by ${route.params?.author}`, title: `Article by ${route.params?.author}`,
header: CustomHeader, header: (props) => <CustomHeader {...props} />,
headerTintColor: '#fff', headerTintColor: '#fff',
headerStyle: { backgroundColor: '#ff005d' }, headerStyle: { backgroundColor: '#ff005d' },
headerBackTitleVisible: false, headerBackTitleVisible: false,

16
packages/stack/src/navigators/createStackNavigator.tsx
View File

@@ -32,7 +32,7 @@ function StackNavigator({
...rest ...rest
}: Props) { }: Props) {
// @ts-expect-error: headerMode='none' is deprecated // @ts-expect-error: headerMode='none' is deprecated
const headerMode = rest.headerMode as StackHeaderMode | 'none'; const headerMode = rest.headerMode as StackHeaderMode | 'none' | undefined;
warnOnce( warnOnce(
headerMode === 'none', headerMode === 'none',
@@ -40,7 +40,7 @@ function StackNavigator({
); );
warnOnce( warnOnce(
headerMode !== 'none', headerMode && headerMode !== 'none',
`Stack Navigator: 'headerMode' is moved to 'options'. Moved it to 'screenOptions' to keep current behavior.` `Stack Navigator: 'headerMode' is moved to 'options'. Moved it to 'screenOptions' to keep current behavior.`
); );
@@ -54,12 +54,14 @@ function StackNavigator({
initialRouteName, initialRouteName,
children, children,
screenOptions, screenOptions,
defaultScreenOptions: { defaultScreenOptions: ({ options }) => ({
headerShown: headerMode !== 'none', headerShown: headerMode ? headerMode !== 'none' : true,
headerMode: headerMode:
headerMode !== 'none' headerMode && headerMode !== 'none'
? headerMode ? headerMode
: rest.mode !== 'modal' && Platform.OS === 'ios' : rest.mode !== 'modal' &&
Platform.OS === 'ios' &&
options.header === undefined
? 'float' ? 'float'
: 'screen', : 'screen',
gestureEnabled: Platform.OS === 'ios', gestureEnabled: Platform.OS === 'ios',
@@ -67,7 +69,7 @@ function StackNavigator({
Platform.OS !== 'web' && Platform.OS !== 'web' &&
Platform.OS !== 'windows' && Platform.OS !== 'windows' &&
Platform.OS !== 'macos', Platform.OS !== 'macos',
}, }),
}); });
React.useEffect( React.useEffect(