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

fix: whitelist supported styles instead of blacklist

Browse Source
This commit is contained in:
satyajit.happy
2019-06-21 19:34:19 +02:00
parent 3750fd7800
commit 2da09926d5
3 changed files with 109 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -387,6 +387,8 @@ Array [
Array [
Object {
"height": 64,
"maxHeight": undefined,
"minHeight": undefined,
},
]
}
@@ -522,6 +524,8 @@ Array [
Array [
Object {
"height": 64,
"maxHeight": undefined,
"minHeight": undefined,
},
]
}

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

@@ -222,7 +222,6 @@ Array [
},
Object {
"backgroundColor": "red",
"opacity": 0.5,
},
]
}
@@ -234,6 +233,8 @@ Array [
Array [
Object {
"height": 64,
"maxHeight": undefined,
"minHeight": undefined,
},
]
}
@@ -540,7 +541,6 @@ Array [
},
Object {
"backgroundColor": "red",
"opacity": 0.5,
},
]
}
@@ -552,6 +552,8 @@ Array [
Array [
Object {
"height": 64,
"maxHeight": undefined,
"minHeight": undefined,
},
]
}

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

@@ -40,16 +40,20 @@ type State = {
leftLabelLayout?: Layout;
};
const warnIfHeaderStyleDefined = (value: any, styleProp: string) => {
if (styleProp === 'position' && value === 'absolute') {
console.warn(
"position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the headerTransparent navigationOption."
);
} else if (value !== undefined) {
console.warn(
`${styleProp} was given a value of ${value}, this has no effect on headerStyle.`
);
}
const warnIfHeaderStylesDefined = (styles: { [key: string]: any }) => {
Object.keys(styles).forEach(styleProp => {
const value = styles[styleProp];
if (styleProp === 'position' && value === 'absolute') {
console.warn(
"position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' navigationOption."
);
} else if (value !== undefined) {
console.warn(
`${styleProp} was given a value of ${value}, this has no effect on headerStyle.`
);
}
});
};
export const getDefaultHeaderHeight = (layout: Layout) => {
@@ -179,50 +183,91 @@ export default class HeaderSegment extends React.Component<Props, State> {
const {
height = getDefaultHeaderHeight(layout),
alignItems,
justifyContent,
flex,
flexDirection,
flexGrow,
flexShrink,
flexBasis,
flexWrap,
position,
padding,
paddingHorizontal,
paddingRight,
paddingLeft,
paddingVertical,
paddingTop,
paddingBottom,
top,
right: _right,
bottom: _bottom,
left: _left,
...safeHeaderStyle
minHeight,
maxHeight,
backgroundColor,
borderBottomColor,
borderBottomEndRadius,
borderBottomLeftRadius,
borderBottomRightRadius,
borderBottomStartRadius,
borderBottomWidth,
borderColor,
borderEndColor,
borderEndWidth,
borderLeftColor,
borderLeftWidth,
borderRadius,
borderRightColor,
borderRightWidth,
borderStartColor,
borderStartWidth,
borderStyle,
borderTopColor,
borderTopEndRadius,
borderTopLeftRadius,
borderTopRightRadius,
borderTopStartRadius,
borderTopWidth,
borderWidth,
// @ts-ignore: web support for shadow
boxShadow,
elevation,
shadowColor,
shadowOffset,
shadowOpacity,
shadowRadius,
...unsafeStyles
} = StyleSheet.flatten(customHeaderStyle || {}) as ViewStyle;
if (process.env.NODE_ENV !== 'production') {
warnIfHeaderStyleDefined(alignItems, 'alignItems');
warnIfHeaderStyleDefined(justifyContent, 'justifyContent');
warnIfHeaderStyleDefined(flex, 'flex');
warnIfHeaderStyleDefined(flexDirection, 'flexDirection');
warnIfHeaderStyleDefined(flexGrow, 'flexGrow');
warnIfHeaderStyleDefined(flexShrink, 'flexShrink');
warnIfHeaderStyleDefined(flexBasis, 'flexBasis');
warnIfHeaderStyleDefined(flexWrap, 'flexWrap');
warnIfHeaderStyleDefined(padding, 'padding');
warnIfHeaderStyleDefined(position, 'position');
warnIfHeaderStyleDefined(paddingHorizontal, 'paddingHorizontal');
warnIfHeaderStyleDefined(paddingRight, 'paddingRight');
warnIfHeaderStyleDefined(paddingLeft, 'paddingLeft');
warnIfHeaderStyleDefined(paddingVertical, 'paddingVertical');
warnIfHeaderStyleDefined(paddingTop, 'paddingTop');
warnIfHeaderStyleDefined(paddingBottom, 'paddingBottom');
warnIfHeaderStyleDefined(top, 'top');
warnIfHeaderStyleDefined(_right, 'right');
warnIfHeaderStyleDefined(_bottom, 'bottom');
warnIfHeaderStyleDefined(_left, 'left');
warnIfHeaderStylesDefined(unsafeStyles);
}
const safeStyles = {
backgroundColor,
borderBottomColor,
borderBottomEndRadius,
borderBottomLeftRadius,
borderBottomRightRadius,
borderBottomStartRadius,
borderBottomWidth,
borderColor,
borderEndColor,
borderEndWidth,
borderLeftColor,
borderLeftWidth,
borderRadius,
borderRightColor,
borderRightWidth,
borderStartColor,
borderStartWidth,
borderStyle,
borderTopColor,
borderTopEndRadius,
borderTopLeftRadius,
borderTopRightRadius,
borderTopStartRadius,
borderTopWidth,
borderWidth,
// @ts-ignore
boxShadow,
elevation,
shadowColor,
shadowOffset,
shadowOpacity,
shadowRadius,
};
// Setting a property to undefined triggers default style
// So we need to filter them out
// Users can use `null` instead
for (const styleProp in safeStyles) {
// @ts-ignore
if (safeStyles[styleProp] === undefined) {
// @ts-ignore
delete safeStyles[styleProp];
}
}
return (
@@ -234,10 +279,13 @@ export default class HeaderSegment extends React.Component<Props, State> {
{headerBackground ? (
headerBackground()
) : headerTransparent ? null : (
<HeaderBackground style={safeHeaderStyle} />
<HeaderBackground style={safeStyles} />
)}
</Animated.View>
<Animated.View pointerEvents="box-none" style={[{ height }]}>
<Animated.View
pointerEvents="box-none"
style={[{ height, minHeight, maxHeight }]}
>
<View
pointerEvents="none"
style={{ height: headerStatusBarHeight }}