mirror of
https://github.com/zhigang1992/react-navigation.git
synced 2026-04-24 04:25:34 +08:00
feat: integrate react-native-screens (#145)
This commit is contained in:
Michał Osadnik
@@ -27,7 +27,7 @@ jest.mock('react-native-reanimated', () => {
|
||||
makeConfigFromBouncinessAndSpeed: NOOP,
|
||||
makeConfigFromOrigamiTensionAndFriction: NOOP,
|
||||
},
|
||||
|
||||
createAnimatedComponent: Component => Component,
|
||||
View,
|
||||
Text,
|
||||
Image,
|
||||
|
||||
@@ -4,7 +4,6 @@ exports[`Nested navigators renders succesfully as direct child 1`] = `
|
||||
Array [
|
||||
<View
|
||||
onLayout={[Function]}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
@@ -12,64 +11,33 @@ Array [
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
accessibilityElementsHidden={false}
|
||||
closing={false}
|
||||
importantForAccessibility="auto"
|
||||
onClose={[Function]}
|
||||
onGestureBegin={[Function]}
|
||||
onGestureCanceled={[Function]}
|
||||
onGestureEnd={[Function]}
|
||||
onOpen={[Function]}
|
||||
onTransitionStart={[Function]}
|
||||
<RNSScreen
|
||||
active={1}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"marginTop": 64,
|
||||
},
|
||||
]
|
||||
}
|
||||
transitionSpec={
|
||||
Object {
|
||||
"close": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
"open": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
accessibilityElementsHidden={false}
|
||||
closing={false}
|
||||
importantForAccessibility="auto"
|
||||
onClose={[Function]}
|
||||
onGestureBegin={[Function]}
|
||||
onGestureCanceled={[Function]}
|
||||
onGestureEnd={[Function]}
|
||||
onOpen={[Function]}
|
||||
onTransitionStart={[Function]}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#000",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
@@ -77,81 +45,77 @@ Array [
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"opacity": undefined,
|
||||
"marginTop": 64,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"overflow": "hidden",
|
||||
transitionSpec={
|
||||
Object {
|
||||
"close": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
"open": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<PanGestureHandler
|
||||
enabled={false}
|
||||
hitSlop={
|
||||
Object {
|
||||
"right": -700,
|
||||
}
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#000",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"opacity": undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"overflow": "hidden",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
maxDeltaY={20}
|
||||
minOffsetX={5}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"translateX": undefined,
|
||||
},
|
||||
Object {
|
||||
"translateX": 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"shadowColor": "#000",
|
||||
"shadowOffset": Object {
|
||||
"height": 1,
|
||||
"width": -1,
|
||||
},
|
||||
"shadowOpacity": 1,
|
||||
"shadowRadius": 5,
|
||||
"top": 0,
|
||||
"width": 3,
|
||||
},
|
||||
Object {
|
||||
"shadowOpacity": undefined,
|
||||
},
|
||||
]
|
||||
<PanGestureHandler
|
||||
enabled={false}
|
||||
hitSlop={
|
||||
Object {
|
||||
"right": -700,
|
||||
}
|
||||
/>
|
||||
}
|
||||
maxDeltaY={20}
|
||||
minOffsetX={5}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
@@ -163,117 +127,139 @@ Array [
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#eee",
|
||||
"transform": Array [
|
||||
Object {
|
||||
"translateX": undefined,
|
||||
},
|
||||
Object {
|
||||
"translateX": 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
onLayout={[Function]}
|
||||
pointerEvents="box-none"
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
"overflow": "hidden",
|
||||
}
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"shadowColor": "#000",
|
||||
"shadowOffset": Object {
|
||||
"height": 1,
|
||||
"width": -1,
|
||||
},
|
||||
"shadowOpacity": 1,
|
||||
"shadowRadius": 5,
|
||||
"top": 0,
|
||||
"width": 3,
|
||||
},
|
||||
Object {
|
||||
"shadowOpacity": undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#eee",
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
accessibilityElementsHidden={false}
|
||||
closing={false}
|
||||
importantForAccessibility="auto"
|
||||
onClose={[Function]}
|
||||
onGestureBegin={[Function]}
|
||||
onGestureCanceled={[Function]}
|
||||
onGestureEnd={[Function]}
|
||||
onOpen={[Function]}
|
||||
onTransitionStart={[Function]}
|
||||
pointerEvents="box-none"
|
||||
onLayout={[Function]}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"overflow": "hidden",
|
||||
}
|
||||
}
|
||||
>
|
||||
<RNSScreen
|
||||
active={1}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"marginTop": 64,
|
||||
},
|
||||
]
|
||||
}
|
||||
transitionSpec={
|
||||
Object {
|
||||
"close": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
"open": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#000",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"opacity": undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"overflow": "hidden",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
}
|
||||
>
|
||||
<PanGestureHandler
|
||||
enabled={false}
|
||||
hitSlop={
|
||||
<View
|
||||
accessibilityElementsHidden={false}
|
||||
closing={false}
|
||||
importantForAccessibility="auto"
|
||||
onClose={[Function]}
|
||||
onGestureBegin={[Function]}
|
||||
onGestureCanceled={[Function]}
|
||||
onGestureEnd={[Function]}
|
||||
onOpen={[Function]}
|
||||
onTransitionStart={[Function]}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"marginTop": 64,
|
||||
},
|
||||
]
|
||||
}
|
||||
transitionSpec={
|
||||
Object {
|
||||
"right": -700,
|
||||
"close": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
"open": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
}
|
||||
}
|
||||
maxDeltaY={20}
|
||||
minOffsetX={5}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#000",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
@@ -281,103 +267,124 @@ Array [
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"translateX": undefined,
|
||||
},
|
||||
Object {
|
||||
"translateX": 0,
|
||||
},
|
||||
],
|
||||
"opacity": undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"overflow": "hidden",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"shadowColor": "#000",
|
||||
"shadowOffset": Object {
|
||||
"height": 1,
|
||||
"width": -1,
|
||||
<PanGestureHandler
|
||||
enabled={false}
|
||||
hitSlop={
|
||||
Object {
|
||||
"right": -700,
|
||||
}
|
||||
}
|
||||
maxDeltaY={20}
|
||||
minOffsetX={5}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
"shadowOpacity": 1,
|
||||
"shadowRadius": 5,
|
||||
"top": 0,
|
||||
"width": 3,
|
||||
},
|
||||
Object {
|
||||
"shadowOpacity": undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#eee",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"translateX": undefined,
|
||||
},
|
||||
Object {
|
||||
"translateX": 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"shadowColor": "#000",
|
||||
"shadowOffset": Object {
|
||||
"height": 1,
|
||||
"width": -1,
|
||||
},
|
||||
"shadowOpacity": 1,
|
||||
"shadowRadius": 5,
|
||||
"top": 0,
|
||||
"width": 3,
|
||||
},
|
||||
Object {
|
||||
"shadowOpacity": undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#eee",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</PanGestureHandler>
|
||||
</View>
|
||||
</PanGestureHandler>
|
||||
</View>
|
||||
</View>
|
||||
</RNSScreen>
|
||||
</View>
|
||||
</View>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"zIndex": 0,
|
||||
},
|
||||
Object {
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
accessibilityElementsHidden={false}
|
||||
importantForAccessibility="auto"
|
||||
onLayout={[Function]}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"zIndex": 0,
|
||||
},
|
||||
Object {
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"height": 64,
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
accessibilityElementsHidden={false}
|
||||
importantForAccessibility="auto"
|
||||
onLayout={[Function]}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
@@ -388,81 +395,100 @@ Array [
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"opacity": undefined,
|
||||
"height": 64,
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "white",
|
||||
"borderBottomColor": "#A7A7AA",
|
||||
"borderBottomWidth": 0.5,
|
||||
"flex": 1,
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Object {
|
||||
"height": 20,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
"justifyContent": "center",
|
||||
"paddingHorizontal": 4,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
null,
|
||||
Object {},
|
||||
Object {
|
||||
"opacity": undefined,
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
<Text
|
||||
onLayout={[Function]}
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": "rgba(0, 0, 0, .9)",
|
||||
"fontSize": 17,
|
||||
"fontWeight": "600",
|
||||
"backgroundColor": "white",
|
||||
"borderBottomColor": "#A7A7AA",
|
||||
"borderBottomWidth": 0.5,
|
||||
"flex": 1,
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Object {
|
||||
"height": 20,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Object {
|
||||
"alignItems": "center",
|
||||
"flex": 1,
|
||||
"flexDirection": "row",
|
||||
"justifyContent": "center",
|
||||
"paddingHorizontal": 4,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
null,
|
||||
Object {},
|
||||
Object {
|
||||
"opacity": undefined,
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
Home
|
||||
</Text>
|
||||
<Text
|
||||
onLayout={[Function]}
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"color": "rgba(0, 0, 0, .9)",
|
||||
"fontSize": 17,
|
||||
"fontWeight": "600",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
>
|
||||
Home
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</PanGestureHandler>
|
||||
</PanGestureHandler>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</RNSScreen>
|
||||
</View>,
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
|
||||
@@ -4,7 +4,6 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
|
||||
Array [
|
||||
<View
|
||||
onLayout={[Function]}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
@@ -12,64 +11,33 @@ Array [
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
accessibilityElementsHidden={false}
|
||||
closing={false}
|
||||
importantForAccessibility="auto"
|
||||
onClose={[Function]}
|
||||
onGestureBegin={[Function]}
|
||||
onGestureCanceled={[Function]}
|
||||
onGestureEnd={[Function]}
|
||||
onOpen={[Function]}
|
||||
onTransitionStart={[Function]}
|
||||
<RNSScreen
|
||||
active={1}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"marginTop": 64,
|
||||
},
|
||||
]
|
||||
}
|
||||
transitionSpec={
|
||||
Object {
|
||||
"close": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
"open": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
accessibilityElementsHidden={false}
|
||||
closing={false}
|
||||
importantForAccessibility="auto"
|
||||
onClose={[Function]}
|
||||
onGestureBegin={[Function]}
|
||||
onGestureCanceled={[Function]}
|
||||
onGestureEnd={[Function]}
|
||||
onOpen={[Function]}
|
||||
onTransitionStart={[Function]}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#000",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
@@ -77,81 +45,77 @@ Array [
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"opacity": undefined,
|
||||
"marginTop": 64,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"overflow": "hidden",
|
||||
transitionSpec={
|
||||
Object {
|
||||
"close": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
"open": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<PanGestureHandler
|
||||
enabled={false}
|
||||
hitSlop={
|
||||
Object {
|
||||
"right": -700,
|
||||
}
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#000",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"opacity": undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"overflow": "hidden",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
maxDeltaY={20}
|
||||
minOffsetX={5}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"translateX": undefined,
|
||||
},
|
||||
Object {
|
||||
"translateX": 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"shadowColor": "#000",
|
||||
"shadowOffset": Object {
|
||||
"height": 1,
|
||||
"width": -1,
|
||||
},
|
||||
"shadowOpacity": 1,
|
||||
"shadowRadius": 5,
|
||||
"top": 0,
|
||||
"width": 3,
|
||||
},
|
||||
Object {
|
||||
"shadowOpacity": undefined,
|
||||
},
|
||||
]
|
||||
<PanGestureHandler
|
||||
enabled={false}
|
||||
hitSlop={
|
||||
Object {
|
||||
"right": -700,
|
||||
}
|
||||
/>
|
||||
}
|
||||
maxDeltaY={20}
|
||||
minOffsetX={5}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
@@ -163,15 +127,64 @@ Array [
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#eee",
|
||||
"transform": Array [
|
||||
Object {
|
||||
"translateX": undefined,
|
||||
},
|
||||
Object {
|
||||
"translateX": 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</PanGestureHandler>
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"shadowColor": "#000",
|
||||
"shadowOffset": Object {
|
||||
"height": 1,
|
||||
"width": -1,
|
||||
},
|
||||
"shadowOpacity": 1,
|
||||
"shadowRadius": 5,
|
||||
"top": 0,
|
||||
"width": 3,
|
||||
},
|
||||
Object {
|
||||
"shadowOpacity": undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#eee",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</PanGestureHandler>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</RNSScreen>
|
||||
</View>,
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
@@ -326,7 +339,6 @@ exports[`StackNavigator renders successfully 1`] = `
|
||||
Array [
|
||||
<View
|
||||
onLayout={[Function]}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Object {
|
||||
"flex": 1,
|
||||
@@ -334,64 +346,33 @@ Array [
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
accessibilityElementsHidden={false}
|
||||
closing={false}
|
||||
importantForAccessibility="auto"
|
||||
onClose={[Function]}
|
||||
onGestureBegin={[Function]}
|
||||
onGestureCanceled={[Function]}
|
||||
onGestureEnd={[Function]}
|
||||
onOpen={[Function]}
|
||||
onTransitionStart={[Function]}
|
||||
<RNSScreen
|
||||
active={1}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"marginTop": 64,
|
||||
},
|
||||
]
|
||||
}
|
||||
transitionSpec={
|
||||
Object {
|
||||
"close": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
"open": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
accessibilityElementsHidden={false}
|
||||
closing={false}
|
||||
importantForAccessibility="auto"
|
||||
onClose={[Function]}
|
||||
onGestureBegin={[Function]}
|
||||
onGestureCanceled={[Function]}
|
||||
onGestureEnd={[Function]}
|
||||
onOpen={[Function]}
|
||||
onTransitionStart={[Function]}
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#000",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
@@ -399,81 +380,77 @@ Array [
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"opacity": undefined,
|
||||
"marginTop": 64,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"overflow": "hidden",
|
||||
transitionSpec={
|
||||
Object {
|
||||
"close": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
"open": Object {
|
||||
"config": Object {
|
||||
"damping": 500,
|
||||
"mass": 3,
|
||||
"overshootClamping": true,
|
||||
"restDisplacementThreshold": 0.01,
|
||||
"restSpeedThreshold": 0.01,
|
||||
"stiffness": 1000,
|
||||
},
|
||||
"timing": "spring",
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<PanGestureHandler
|
||||
enabled={false}
|
||||
hitSlop={
|
||||
Object {
|
||||
"right": -700,
|
||||
}
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#000",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"opacity": undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"flex": 1,
|
||||
"overflow": "hidden",
|
||||
},
|
||||
undefined,
|
||||
]
|
||||
}
|
||||
maxDeltaY={20}
|
||||
minOffsetX={5}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"transform": Array [
|
||||
Object {
|
||||
"translateX": undefined,
|
||||
},
|
||||
Object {
|
||||
"translateX": 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"shadowColor": "#000",
|
||||
"shadowOffset": Object {
|
||||
"height": 1,
|
||||
"width": -1,
|
||||
},
|
||||
"shadowOpacity": 1,
|
||||
"shadowRadius": 5,
|
||||
"top": 0,
|
||||
"width": 3,
|
||||
},
|
||||
Object {
|
||||
"shadowOpacity": undefined,
|
||||
},
|
||||
]
|
||||
<PanGestureHandler
|
||||
enabled={false}
|
||||
hitSlop={
|
||||
Object {
|
||||
"right": -700,
|
||||
}
|
||||
/>
|
||||
}
|
||||
maxDeltaY={20}
|
||||
minOffsetX={5}
|
||||
>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
@@ -485,15 +462,64 @@ Array [
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#eee",
|
||||
"transform": Array [
|
||||
Object {
|
||||
"translateX": undefined,
|
||||
},
|
||||
Object {
|
||||
"translateX": 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</PanGestureHandler>
|
||||
>
|
||||
<View
|
||||
pointerEvents="none"
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"backgroundColor": "#fff",
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"shadowColor": "#000",
|
||||
"shadowOffset": Object {
|
||||
"height": 1,
|
||||
"width": -1,
|
||||
},
|
||||
"shadowOpacity": 1,
|
||||
"shadowRadius": 5,
|
||||
"top": 0,
|
||||
"width": 3,
|
||||
},
|
||||
Object {
|
||||
"shadowOpacity": undefined,
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
<View
|
||||
style={
|
||||
Array [
|
||||
Object {
|
||||
"bottom": 0,
|
||||
"left": 0,
|
||||
"position": "absolute",
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
},
|
||||
Object {
|
||||
"backgroundColor": "#eee",
|
||||
},
|
||||
]
|
||||
}
|
||||
/>
|
||||
</View>
|
||||
</PanGestureHandler>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</RNSScreen>
|
||||
</View>,
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import * as React from 'react';
|
||||
import {
|
||||
View,
|
||||
StyleSheet,
|
||||
LayoutChangeEvent,
|
||||
Dimensions,
|
||||
Platform,
|
||||
ViewProps,
|
||||
} from 'react-native';
|
||||
import Animated from 'react-native-reanimated';
|
||||
import { ScreenContainer, NativeScreen } from 'react-native-screens';
|
||||
import { getDefaultHeaderHeight } from '../Header/HeaderSegment';
|
||||
import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
|
||||
import StackItem from './StackItem';
|
||||
@@ -71,6 +72,16 @@ type State = {
|
||||
const dimensions = Dimensions.get('window');
|
||||
const layout = { width: dimensions.width, height: dimensions.height };
|
||||
|
||||
const AnimatedScreen = Animated.createAnimatedComponent(
|
||||
NativeScreen
|
||||
) as React.ComponentType<
|
||||
ViewProps & { active: number | Animated.Node<number> }
|
||||
>;
|
||||
|
||||
const { cond, eq } = Animated;
|
||||
|
||||
const ANIMATED_ONE = new Animated.Value(1);
|
||||
|
||||
export default class Stack extends React.Component<Props, State> {
|
||||
static getDerivedStateFromProps(props: Props, state: State) {
|
||||
if (props.routes === state.routes) {
|
||||
@@ -202,57 +213,72 @@ export default class Stack extends React.Component<Props, State> {
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<View
|
||||
style={styles.container}
|
||||
onLayout={this.handleLayout}
|
||||
pointerEvents={layout.height && layout.width ? 'box-none' : 'none'}
|
||||
>
|
||||
<ScreenContainer style={styles.container} onLayout={this.handleLayout}>
|
||||
{routes.map((route, index, self) => {
|
||||
const focused = focusedRoute.key === route.key;
|
||||
const current = progress[route.key];
|
||||
const descriptor = descriptors[route.key];
|
||||
const scene = scenes[index];
|
||||
const next = self[index + 1]
|
||||
? progress[self[index + 1].key]
|
||||
: ANIMATED_ONE;
|
||||
|
||||
// Display current screen and a screen beneath. On Android screen beneath is hidden on animation finished bs of RNS's issue.
|
||||
const isScreenActive =
|
||||
index === self.length - 1
|
||||
? 1
|
||||
: Platform.OS === 'android'
|
||||
? cond(eq(next, 1), 0, 1)
|
||||
: index === self.length - 2
|
||||
? 1
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<StackItem
|
||||
<AnimatedScreen
|
||||
key={route.key}
|
||||
index={index}
|
||||
active={index === self.length - 1}
|
||||
focused={focused}
|
||||
closing={closingRoutes.includes(route.key)}
|
||||
layout={layout}
|
||||
current={current}
|
||||
scene={scene}
|
||||
previousScene={scenes[index - 1]}
|
||||
navigation={navigation}
|
||||
direction={direction}
|
||||
transparentCard={transparentCard}
|
||||
cardOverlayEnabled={cardOverlayEnabled}
|
||||
cardShadowEnabled={cardShadowEnabled}
|
||||
gesturesEnabled={index !== 0 && getGesturesEnabled({ route })}
|
||||
onGestureBegin={onGestureBegin}
|
||||
onGestureCanceled={onGestureCanceled}
|
||||
onGestureEnd={onGestureEnd}
|
||||
gestureResponseDistance={
|
||||
descriptor.options.gestureResponseDistance
|
||||
}
|
||||
transitionSpec={transitionSpec}
|
||||
headerStyleInterpolator={headerStyleInterpolator}
|
||||
cardStyleInterpolator={cardStyleInterpolator}
|
||||
floaingHeaderHeight={floaingHeaderHeight}
|
||||
hasCustomHeader={descriptor.options.header === null}
|
||||
getPreviousRoute={getPreviousRoute}
|
||||
headerMode={headerMode}
|
||||
renderHeader={renderHeader}
|
||||
renderScene={renderScene}
|
||||
onOpenRoute={onOpenRoute}
|
||||
onCloseRoute={onCloseRoute}
|
||||
onTransitionStart={onTransitionStart}
|
||||
onGoBack={onGoBack}
|
||||
/>
|
||||
style={StyleSheet.absoluteFill}
|
||||
active={isScreenActive}
|
||||
pointerEvents="box-none"
|
||||
>
|
||||
<StackItem
|
||||
index={index}
|
||||
active={index === self.length - 1}
|
||||
focused={focused}
|
||||
closing={closingRoutes.includes(route.key)}
|
||||
layout={layout}
|
||||
current={current}
|
||||
scene={scene}
|
||||
previousScene={scenes[index - 1]}
|
||||
navigation={navigation}
|
||||
direction={direction}
|
||||
transparentCard={transparentCard}
|
||||
cardOverlayEnabled={cardOverlayEnabled}
|
||||
cardShadowEnabled={cardShadowEnabled}
|
||||
gesturesEnabled={index !== 0 && getGesturesEnabled({ route })}
|
||||
onGestureBegin={onGestureBegin}
|
||||
onGestureCanceled={onGestureCanceled}
|
||||
onGestureEnd={onGestureEnd}
|
||||
gestureResponseDistance={
|
||||
descriptor.options.gestureResponseDistance
|
||||
}
|
||||
transitionSpec={transitionSpec}
|
||||
headerStyleInterpolator={headerStyleInterpolator}
|
||||
cardStyleInterpolator={cardStyleInterpolator}
|
||||
floaingHeaderHeight={floaingHeaderHeight}
|
||||
hasCustomHeader={descriptor.options.header === null}
|
||||
getPreviousRoute={getPreviousRoute}
|
||||
headerMode={headerMode}
|
||||
renderHeader={renderHeader}
|
||||
renderScene={renderScene}
|
||||
onOpenRoute={onOpenRoute}
|
||||
onCloseRoute={onCloseRoute}
|
||||
onTransitionStart={onTransitionStart}
|
||||
onGoBack={onGoBack}
|
||||
/>
|
||||
</AnimatedScreen>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</ScreenContainer>
|
||||
{headerMode === 'float'
|
||||
? renderHeader({
|
||||
mode: 'float',
|
||||
|
||||
Reference in New Issue
Block a user