kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-05-20 04:21:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: don't use absolute position for header

Browse Source 
BREAKING CHANGE: We now use flexbox for header elements which could break some existing style code which relied on absolute positioning.
This commit is contained in:
Satyajit Sahoo
2021-01-15 12:06:59 +01:00
parent 22a8afac74
commit 79a85a431c
2 changed files with 46 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
packages/drawer/src/views/Header.tsx
View File

@@ -111,22 +111,19 @@ export default function HeaderSegment({
>
<View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
<View pointerEvents="box-none" style={styles.content}>
{leftButton ? (
<View
pointerEvents="box-none"
style={[styles.left, { left: insets.left }]}
>
{leftButton}
</View>
) : null}
<View
pointerEvents="box-none"
style={[styles.left, { marginLeft: insets.left }]}
>
{leftButton}
</View>
<View
pointerEvents="box-none"
style={[
headerTitleAlign === 'left'
? {
position: 'absolute',
left: (leftButton ? 72 : 16) + insets.left,
right: (rightButton ? 72 : 16) + insets.right,
marginLeft: (leftButton ? 72 : 16) + insets.left,
marginRight: (rightButton ? 72 : 16) + insets.right,
}
: {
marginHorizontal:
@@ -159,14 +156,12 @@ export default function HeaderSegment({
</Text>
)}
</View>
{rightButton ? (
<View
pointerEvents="box-none"
style={[styles.right, { right: insets.right }]}
>
{rightButton}
</View>
) : null}
<View
pointerEvents="box-none"
style={[styles.right, { marginRight: insets.right }]}
>
{rightButton}
</View>
</View>
</View>
);
@@ -223,18 +218,14 @@ const styles = StyleSheet.create({
marginHorizontal: 11,
},
left: {
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
flexGrow: 1,
flexBasis: 0,
justifyContent: 'center',
alignItems: 'flex-start',
},
right: {
position: 'absolute',
right: 0,
top: 0,
bottom: 0,
flexGrow: 1,
flexBasis: 0,
justifyContent: 'center',
alignItems: 'flex-end',
},

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

@@ -328,27 +328,24 @@ export default function HeaderSegment(props: Props) {
>
<View pointerEvents="none" style={{ height: headerStatusBarHeight }} />
<View pointerEvents="box-none" style={styles.content}>
{leftButton ? (
<Animated.View
pointerEvents="box-none"
style={[
styles.left,
{ left: insets.left },
leftButtonStyle,
leftContainerStyle,
]}
>
{leftButton}
</Animated.View>
) : null}
<Animated.View
pointerEvents="box-none"
style={[
styles.left,
{ marginLeft: insets.left },
leftButtonStyle,
leftContainerStyle,
]}
>
{leftButton}
</Animated.View>
<Animated.View
pointerEvents="box-none"
style={[
headerTitleAlign === 'left'
? {
position: 'absolute',
left: (leftButton ? 72 : 16) + insets.left,
right: (rightButton ? 72 : 16) + insets.right,
marginLeft: (leftButton ? 72 : 16) + insets.left,
marginRight: (rightButton ? 72 : 16) + insets.right,
}
: {
marginHorizontal:
@@ -370,19 +367,17 @@ export default function HeaderSegment(props: Props) {
style: customTitleStyle,
})}
</Animated.View>
{rightButton ? (
<Animated.View
pointerEvents="box-none"
style={[
styles.right,
{ right: insets.right },
rightButtonStyle,
rightContainerStyle,
]}
>
{rightButton}
</Animated.View>
) : null}
<Animated.View
pointerEvents="box-none"
style={[
styles.right,
{ marginRight: insets.right },
rightButtonStyle,
rightContainerStyle,
]}
>
{rightButton}
</Animated.View>
</View>
</Animated.View>
</React.Fragment>
@@ -397,18 +392,14 @@ const styles = StyleSheet.create({
justifyContent: 'center',
},
left: {
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
flexGrow: 1,
flexBasis: 0,
justifyContent: 'center',
alignItems: 'flex-start',
},
right: {
position: 'absolute',
right: 0,
top: 0,
bottom: 0,
flexGrow: 1,
flexBasis: 0,
justifyContent: 'center',
alignItems: 'flex-end',
},