Add shadow opacity and don't animate view opacity in transition
This commit is contained in:
parent
19424d9ab1
commit
d57ee8623d
|
@ -60,9 +60,8 @@ const styles = StyleSheet.create({
|
|||
main: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: '#E9E9EF',
|
||||
shadowColor: 'black',
|
||||
shadowOffset: { width: 0, height: 0 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: -4, height: 0 },
|
||||
shadowRadius: 5,
|
||||
},
|
||||
transparent: {
|
||||
|
|
|
@ -47,11 +47,6 @@ function forHorizontal(props) {
|
|||
|
||||
const { first, last } = interpolate;
|
||||
const index = scene.index;
|
||||
const opacity = position.interpolate({
|
||||
inputRange: [first, first + 0.01, index, last - 0.01, last],
|
||||
outputRange: [0, 1, 1, 0.85, 0],
|
||||
extrapolate: 'clamp',
|
||||
});
|
||||
|
||||
const width = layout.initWidth;
|
||||
const translateX = position.interpolate({
|
||||
|
@ -63,9 +58,15 @@ function forHorizontal(props) {
|
|||
});
|
||||
const translateY = 0;
|
||||
|
||||
const shadowOpacity = position.interpolate({
|
||||
inputRange: [first, index, last],
|
||||
outputRange: [0.01, 0.2, 0.01],
|
||||
extrapolate: 'clamp',
|
||||
});
|
||||
|
||||
return {
|
||||
opacity,
|
||||
transform: [{ translateX }, { translateY }],
|
||||
shadowOpacity,
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -84,12 +85,6 @@ function forVertical(props) {
|
|||
|
||||
const { first, last } = interpolate;
|
||||
const index = scene.index;
|
||||
const opacity = position.interpolate({
|
||||
inputRange: [first, first + 0.01, index, last - 0.01, last],
|
||||
outputRange: [0, 1, 1, 0.85, 0],
|
||||
extrapolate: 'clamp',
|
||||
});
|
||||
|
||||
const height = layout.initHeight;
|
||||
const translateY = position.interpolate({
|
||||
inputRange: [first, index, last],
|
||||
|
@ -99,7 +94,6 @@ function forVertical(props) {
|
|||
const translateX = 0;
|
||||
|
||||
return {
|
||||
opacity,
|
||||
transform: [{ translateX }, { translateY }],
|
||||
};
|
||||
}
|
||||
|
|
|
@ -25,7 +25,7 @@ const SlideFromRightIOS = {
|
|||
transitionSpec: IOSTransitionSpec,
|
||||
screenInterpolator: StyleInterpolator.forHorizontal,
|
||||
containerStyle: {
|
||||
backgroundColor: '#000',
|
||||
backgroundColor: '#eee',
|
||||
},
|
||||
};
|
||||
|
||||
|
@ -34,7 +34,7 @@ const ModalSlideFromBottomIOS = {
|
|||
transitionSpec: IOSTransitionSpec,
|
||||
screenInterpolator: StyleInterpolator.forVertical,
|
||||
containerStyle: {
|
||||
backgroundColor: '#000',
|
||||
backgroundColor: '#eee',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue