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

fix: fix broken shadows on card

Browse Source
This commit is contained in:
satyajit.happy
2019-07-01 17:33:42 +02:00
parent a4d489e9c0
commit 43a41f0ae5
3 changed files with 50 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -77,7 +77,6 @@ Array [
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
undefined,
Object {
@@ -101,7 +100,6 @@ Array [
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
Object {
"transform": Array [
@@ -122,16 +120,18 @@ Array [
Array [
Object {
"backgroundColor": "#fff",
"bottom": 0,
"left": 0,
"position": "absolute",
"shadowColor": "#000",
"shadowOpacity": 0.3,
"shadowRadius": 5,
},
Object {
"bottom": 0,
"left": 0,
"shadowOffset": Object {
"height": 1,
"width": -1,
},
"shadowOpacity": 1,
"shadowRadius": 5,
"top": 0,
"width": 3,
},
@@ -230,7 +230,6 @@ Array [
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
undefined,
Object {
@@ -254,7 +253,6 @@ Array [
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
Object {
"transform": Array [
@@ -275,16 +273,18 @@ Array [
Array [
Object {
"backgroundColor": "#fff",
"bottom": 0,
"left": 0,
"position": "absolute",
"shadowColor": "#000",
"shadowOpacity": 0.3,
"shadowRadius": 5,
},
Object {
"bottom": 0,
"left": 0,
"shadowOffset": Object {
"height": 1,
"width": -1,
},
"shadowOpacity": 1,
"shadowRadius": 5,
"top": 0,
"width": 3,
},

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

@@ -77,7 +77,6 @@ Array [
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
undefined,
Object {
@@ -101,7 +100,6 @@ Array [
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
Object {
"transform": Array [
@@ -122,16 +120,18 @@ Array [
Array [
Object {
"backgroundColor": "#fff",
"bottom": 0,
"left": 0,
"position": "absolute",
"shadowColor": "#000",
"shadowOpacity": 0.3,
"shadowRadius": 5,
},
Object {
"bottom": 0,
"left": 0,
"shadowOffset": Object {
"height": 1,
"width": -1,
},
"shadowOpacity": 1,
"shadowRadius": 5,
"top": 0,
"width": 3,
},
@@ -393,7 +393,6 @@ Array [
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
undefined,
Object {
@@ -417,7 +416,6 @@ Array [
Array [
Object {
"flex": 1,
"overflow": "hidden",
},
Object {
"transform": Array [
@@ -438,16 +436,18 @@ Array [
Array [
Object {
"backgroundColor": "#fff",
"bottom": 0,
"left": 0,
"position": "absolute",
"shadowColor": "#000",
"shadowOpacity": 0.3,
"shadowRadius": 5,
},
Object {
"bottom": 0,
"left": 0,
"shadowOffset": Object {
"height": 1,
"width": -1,
},
"shadowOpacity": 1,
"shadowRadius": 5,
"top": 0,
"width": 3,
},

34
packages/stack/src/views/Stack/Card.tsx
View File

@@ -520,9 +520,15 @@ export default class Card extends React.Component<Props> {
{...this.gestureActivationCriteria()}
>
<Animated.View style={[styles.container, cardStyle]}>
{shadowEnabled && !transparent ? (
{shadowEnabled && shadowStyle && !transparent ? (
<Animated.View
style={[styles.shadow, shadowStyle]}
style={[
styles.shadow,
direction === 'horizontal'
? styles.shadowHorizontal
: styles.shadowVertical,
shadowStyle,
]}
pointerEvents="none"
/>
) : null}
@@ -530,7 +536,7 @@ export default class Card extends React.Component<Props> {
active={active}
progress={this.props.current}
style={[
styles.container,
styles.content,
transparent ? styles.transparent : styles.opaque,
contentStyle,
]}
@@ -549,6 +555,9 @@ export default class Card extends React.Component<Props> {
const styles = StyleSheet.create({
container: {
flex: 1,
},
content: {
flex: 1,
overflow: 'hidden',
},
overlay: {
@@ -556,16 +565,25 @@ const styles = StyleSheet.create({
backgroundColor: '#000',
},
shadow: {
position: 'absolute',
backgroundColor: '#fff',
shadowRadius: 5,
shadowColor: '#000',
shadowOpacity: 0.3,
},
shadowHorizontal: {
top: 0,
left: 0,
bottom: 0,
width: 3,
position: 'absolute',
backgroundColor: '#fff',
shadowOffset: { width: -1, height: 1 },
shadowRadius: 5,
shadowColor: '#000',
shadowOpacity: 1,
},
shadowVertical: {
top: 0,
left: 0,
right: 0,
height: 3,
shadowOffset: { width: 1, height: -1 },
},
transparent: {
backgroundColor: 'transparent',