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

feat: add headerTransparent option

Browse Source
This commit is contained in:
satyajit.happy
2019-06-21 12:54:19 +02:00
parent 2c1b144492
commit 4b2e6a95ca
8 changed files with 338 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/stack/example/src/WipeStack.js
View File

@@ -152,6 +152,9 @@ export default createStackNavigator(
{
initialRouteName: 'List',
headerMode: 'screen',
defaultNavigationOptions: {
cardOverlayEnabled: true,
},
...TransitionPresets.WipeFromBottomAndroid,
}
);

206
packages/stack/src/navigators/__tests__/__snapshots__/NestedNavigator.test.tsx.snap
View File

@@ -342,19 +342,12 @@ Array [
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"height": 64,
},
undefined,
]
Object {
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
@@ -388,58 +381,70 @@ Array [
}
/>
</View>
<View
pointerEvents="none"
style={
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
}
Array [
Object {
"height": 64,
},
undefined,
]
}
>
<View
pointerEvents="none"
style={
Array [
null,
Object {},
Object {
"opacity": undefined,
},
undefined,
]
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
}
}
>
<Text
onLayout={[Function]}
<View
style={
Array [
null,
Object {},
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
"opacity": undefined,
},
Array [
Object {
"color": undefined,
},
undefined,
],
undefined,
]
}
>
Home
</Text>
<Text
onLayout={[Function]}
style={
Array [
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
},
Array [
Object {
"color": undefined,
},
undefined,
],
]
}
>
Home
</Text>
</View>
</View>
</View>
</View>
@@ -473,19 +478,12 @@ Array [
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"height": 64,
},
undefined,
]
Object {
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
@@ -519,58 +517,70 @@ Array [
}
/>
</View>
<View
pointerEvents="none"
style={
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
}
Array [
Object {
"height": 64,
},
undefined,
]
}
>
<View
pointerEvents="none"
style={
Array [
null,
Object {},
Object {
"opacity": undefined,
},
undefined,
]
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
}
}
>
<Text
onLayout={[Function]}
<View
style={
Array [
null,
Object {},
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
"opacity": undefined,
},
Array [
Object {
"color": undefined,
},
undefined,
],
undefined,
]
}
>
Sub
</Text>
<Text
onLayout={[Function]}
style={
Array [
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
},
Array [
Object {
"color": undefined,
},
undefined,
],
]
}
>
Sub
</Text>
</View>
</View>
</View>
</View>

274
packages/stack/src/navigators/__tests__/__snapshots__/StackNavigator.test.tsx.snap
View File

@@ -186,26 +186,12 @@ Array [
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"height": 64,
},
Array [
Object {
"backgroundColor": "red",
},
Object {
"opacity": 0.5,
},
],
]
Object {
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
@@ -239,78 +225,97 @@ Array [
}
/>
</View>
<View
pointerEvents="none"
style={
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
}
Array [
Object {
"height": 64,
},
Array [
Object {
"backgroundColor": "red",
},
Object {
"opacity": 0.5,
},
],
]
}
>
<View
pointerEvents="none"
style={
Array [
null,
Object {},
Object {
"opacity": undefined,
},
undefined,
]
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
}
}
>
<Text
onLayout={[Function]}
<View
style={
Array [
null,
Object {},
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
"opacity": undefined,
},
Array [
Object {
"color": undefined,
},
undefined,
],
undefined,
]
}
>
Welcome anonymous
</Text>
</View>
<View
style={
Array [
Object {
"alignItems": "flex-end",
"bottom": 0,
"justifyContent": "center",
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"opacity": undefined,
},
undefined,
]
}
>
<View />
<Text
onLayout={[Function]}
style={
Array [
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
},
Array [
Object {
"color": undefined,
},
undefined,
],
]
}
>
Welcome anonymous
</Text>
</View>
<View
style={
Array [
Object {
"alignItems": "flex-end",
"bottom": 0,
"justifyContent": "center",
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"opacity": undefined,
},
undefined,
]
}
>
<View />
</View>
</View>
</View>
</View>
@@ -504,26 +509,12 @@ Array [
onLayout={[Function]}
pointerEvents="box-none"
style={
Array [
Object {
"bottom": 0,
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
},
Object {
"height": 64,
},
Array [
Object {
"backgroundColor": "red",
},
Object {
"opacity": 0.5,
},
],
]
Object {
"left": 0,
"position": "absolute",
"right": 0,
"top": 0,
}
}
>
<View
@@ -557,58 +548,77 @@ Array [
}
/>
</View>
<View
pointerEvents="none"
style={
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
}
Array [
Object {
"height": 64,
},
Array [
Object {
"backgroundColor": "red",
},
Object {
"opacity": 0.5,
},
],
]
}
>
<View
pointerEvents="none"
style={
Array [
null,
Object {},
Object {
"opacity": undefined,
},
undefined,
]
Object {
"height": 20,
}
}
/>
<View
pointerEvents="box-none"
style={
Object {
"alignItems": "center",
"flex": 1,
"flexDirection": "row",
"justifyContent": "center",
"paddingHorizontal": 4,
}
}
>
<Text
onLayout={[Function]}
<View
style={
Array [
null,
Object {},
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
"opacity": undefined,
},
Array [
Object {
"color": undefined,
},
undefined,
],
undefined,
]
}
>
Welcome anonymous
</Text>
<Text
onLayout={[Function]}
style={
Array [
Object {
"color": "rgba(0, 0, 0, .9)",
"fontSize": 17,
"fontWeight": "600",
},
Array [
Object {
"color": undefined,
},
undefined,
],
]
}
>
Welcome anonymous
</Text>
</View>
</View>
</View>
</View>

1
packages/stack/src/types.tsx
View File

@@ -82,6 +82,7 @@ export type HeaderOptions = {
headerBackgroundStyle?: StyleProp<ViewStyle>;
headerStyle?: StyleProp<ViewStyle>;
headerStatusBarHeight?: number;
headerTransparent?: boolean;
};
export type HeaderProps = {

22
packages/stack/src/views/Header/HeaderContainer.tsx
View File

@@ -6,7 +6,6 @@ import {
StyleProp,
ViewStyle,
} from 'react-native';
import { getDefaultHeaderHeight } from './HeaderSegment';
import {
Layout,
Route,
@@ -98,13 +97,11 @@ export default function HeaderContainer({
importantForAccessibility={
isFocused ? 'auto' : 'no-hide-descendants'
}
style={[
mode === 'float' ? StyleSheet.absoluteFill : null,
mode === 'screen' && options.header !== undefined
? null
: { height: getDefaultHeaderHeight(layout) },
options.headerStyle,
]}
style={
mode === 'float' || options.headerTransparent
? styles.header
: null
}
>
{options.header !== undefined ? (
options.header === null ? null : (
@@ -119,3 +116,12 @@ export default function HeaderContainer({
</View>
);
}
const styles = StyleSheet.create({
header: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
},
});

117
packages/stack/src/views/Header/HeaderSegment.tsx
View File

@@ -122,6 +122,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
),
// @ts-ignore
headerStatusBarHeight = getStatusBarHeight(layout.width > layout.height),
headerTransparent,
headerTintColor,
headerBackground,
headerBackgroundStyle,
@@ -138,6 +139,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
headerLeftContainerStyle: leftContainerStyle,
headerRightContainerStyle: rightContainerStyle,
headerTitleContainerStyle: titleContainerStyle,
headerStyle: customHeaderStyle,
styleInterpolator,
} = this.props;
@@ -166,68 +168,79 @@ export default class HeaderSegment extends React.Component<Props, State> {
>
{headerBackground ? (
headerBackground()
) : (
) : headerTransparent ? null : (
<HeaderBackground style={headerBackgroundStyle} />
)}
</Animated.View>
<View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
<View pointerEvents="box-none" style={styles.container}>
{onGoBack ? (
<Animated.View
style={[styles.left, leftButtonStyle, leftContainerStyle]}
>
{left({
backImage,
pressColorAndroid,
allowFontScaling: backAllowFontScaling,
onPress: onGoBack,
labelVisible: headerBackTitleVisible,
label: leftLabel !== undefined ? leftLabel : previousTitle,
truncatedLabel,
labelStyle: [leftLabelStyle, customLeftLabelStyle],
onLabelLayout: this.handleLeftLabelLayout,
screenLayout: layout,
titleLayout,
tintColor: headerTintColor,
})}
</Animated.View>
) : null}
{currentTitle ? (
<Animated.View
style={[
Platform.select({
ios: null,
default: { left: onGoBack ? 72 : 16 },
}),
styles.title,
titleStyle,
titleContainerStyle,
]}
>
<HeaderTitle
onLayout={this.handleTitleLayout}
allowFontScaling={titleAllowFontScaling}
style={[{ color: headerTintColor }, customTitleStyle]}
<Animated.View
pointerEvents="box-none"
style={[
{ height: getDefaultHeaderHeight(layout) },
customHeaderStyle,
]}
>
<View
pointerEvents="none"
style={{ height: headerStatusBarHeight }}
/>
<View pointerEvents="box-none" style={styles.content}>
{onGoBack ? (
<Animated.View
style={[styles.left, leftButtonStyle, leftContainerStyle]}
>
{currentTitle}
</HeaderTitle>
</Animated.View>
) : null}
{right ? (
<Animated.View
style={[styles.right, rightButtonStyle, rightContainerStyle]}
>
{right({ tintColor: headerTintColor })}
</Animated.View>
) : null}
</View>
{left({
backImage,
pressColorAndroid,
allowFontScaling: backAllowFontScaling,
onPress: onGoBack,
labelVisible: headerBackTitleVisible,
label: leftLabel !== undefined ? leftLabel : previousTitle,
truncatedLabel,
labelStyle: [leftLabelStyle, customLeftLabelStyle],
onLabelLayout: this.handleLeftLabelLayout,
screenLayout: layout,
titleLayout,
tintColor: headerTintColor,
})}
</Animated.View>
) : null}
{currentTitle ? (
<Animated.View
style={[
Platform.select({
ios: null,
default: { left: onGoBack ? 72 : 16 },
}),
styles.title,
titleStyle,
titleContainerStyle,
]}
>
<HeaderTitle
onLayout={this.handleTitleLayout}
allowFontScaling={titleAllowFontScaling}
style={[{ color: headerTintColor }, customTitleStyle]}
>
{currentTitle}
</HeaderTitle>
</Animated.View>
) : null}
{right ? (
<Animated.View
style={[styles.right, rightButtonStyle, rightContainerStyle]}
>
{right({ tintColor: headerTintColor })}
</Animated.View>
) : null}
</View>
</Animated.View>
</React.Fragment>
);
}
}
const styles = StyleSheet.create({
container: {
content: {
flex: 1,
paddingHorizontal: 4,
flexDirection: 'row',

2
packages/stack/src/views/Stack/Stack.tsx
View File

@@ -229,6 +229,7 @@ export default class Stack extends React.Component<Props, State> {
const {
header,
headerTransparent,
cardTransparent,
cardShadowEnabled,
cardOverlayEnabled,
@@ -270,6 +271,7 @@ export default class Stack extends React.Component<Props, State> {
hasCustomHeader={header === null}
getPreviousRoute={getPreviousRoute}
headerMode={headerMode}
headerTransparent={headerTransparent}
renderHeader={renderHeader}
renderScene={renderScene}
onOpenRoute={onOpenRoute}

4
packages/stack/src/views/Stack/StackItem.tsx
View File

@@ -55,6 +55,7 @@ type Props = {
headerStyleInterpolator: HeaderStyleInterpolator;
cardStyleInterpolator: CardStyleInterpolator;
headerMode: HeaderMode;
headerTransparent?: boolean;
floaingHeaderHeight: number;
hasCustomHeader: boolean;
};
@@ -102,6 +103,7 @@ export default class StackItem extends React.PureComponent<Props> {
hasCustomHeader,
getPreviousRoute,
headerMode,
headerTransparent,
renderHeader,
renderScene,
} = this.props;
@@ -131,7 +133,7 @@ export default class StackItem extends React.PureComponent<Props> {
importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
pointerEvents="box-none"
containerStyle={
headerMode === 'float' && !hasCustomHeader
headerMode === 'float' && !headerTransparent && !hasCustomHeader
? { marginTop: floaingHeaderHeight }
: null
}