从顶部反应本机导航幻灯片答案

【问题标题】：React native navigation slide from top从顶部反应本机导航幻灯片
【发布时间】：2020-12-06 15:40:36
【问题描述】：

无论我的新屏幕从上到下滑动，我都想创建导航动画。这段代码就像从下往上滑动一样，我不明白如何改变它。

const SlideFromTop = (props: StackCardInterpolationProps): StackCardInterpolatedStyle => {
    const progress = Animated.add(
        props.current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1],
            extrapolate: 'clamp',
        }),
        props.next
            ? props.next.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 1],
                extrapolate: 'clamp',
            })
            : 0
    );
    
    return {
        cardStyle: {
            transform: [
                {
                    translateY: Animated.multiply(
                        progress.interpolate({
                            inputRange: [0, 1, 2],
                            outputRange: [
                                props.layouts.screen.height, // Focused, but offscreen in the beginning
                                0, // Fully focused
                                props.layouts.screen.height * -0.3, // Fully unfocused
                            ],
                            extrapolate: 'clamp',
                        }),
                        props.inverted
                    ),
                },
            ],
        },
    };
};

我的导航看起来像

<NavigationContainer>
    <Stack.Navigator
        initialRouteName="List"
        headerMode="none">
        <Stack.Screen
            name="Calendar"
            component={CalendarSlider}
            options={{
                title: 'CalendarSlider',
                cardStyleInterpolator: SlideFromTop,
            }}
        />
    </Stack.Navigator>
</NavigationContainer>

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

问题似乎出在插值器的 outputRange 上 - 您可能希望将 -props.layouts.screen.height 指定为起点和终点，以便将屏幕顶部置于屏幕之外：

outputRange: [
  -props.layouts.screen.height,
  0,
  -props.layouts.screen.height,
]

【讨论】：

谢谢，这可行： outputRange: [ -props.layouts.screen.width, 0, props.layouts.screen.width ],