如何基于现有React Native Stack代码实现类似TikTok的上滑导航？

1. 优化栈导航的垂直手势触发范围 #

你已经给栈导航设置了gestureDirection: 'vertical'，但默认手势响应区域有限，需要调整为全屏触发，同时确保手势功能开启：

import { Dimensions } from 'react-native';

export default function App() {
  const Stack = createNativeStackNavigator();
  const screenHeight = Dimensions.get('window').height;

  return (
    <NavigationContainer>
      <Stack.Navigator 
        initialRouteName='feed' 
        screenOptions={{ 
          headerShown: false, 
          gestureDirection: 'vertical',
          gestureEnabled: true,
          // 让手势响应覆盖整个屏幕高度
          gestureResponseDistance: { vertical: screenHeight }
        }}
      >
        <Stack.Screen name="feed" component={IvoryFeedScreen} />
        <Stack.Screen name="home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 自定义切换动画（贴近TikTok滑动质感） #

默认的垂直切换动画不够贴合TikTok的全屏滑动效果，你可以通过自定义过渡参数和卡片插值器来模拟：

先导入所需工具：

import { TransitionSpecs, CardStyleInterpolators } from '@react-navigation/stack';
import { Dimensions, Easing } from 'react-native';

然后更新导航配置：

screenOptions={{ 
  headerShown: false, 
  gestureDirection: 'vertical',
  gestureEnabled: true,
  gestureResponseDistance: { vertical: Dimensions.get('window').height },
  // 配置动画速度和曲线，更接近TikTok的滑动节奏
  transitionSpec: {
    open: {
      animation: 'timing',
      config: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
      },
    },
    close: {
      animation: 'timing',
      config: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
      },
    },
  },
  // 自定义卡片滑动的位移效果
  cardStyleInterpolator: ({ current, next, layouts }) => {
    return {
      cardStyle: {
        transform: [
          {
            translateY: current.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [layouts.screen.height, 0],
            }),
          },
          ...(next ? [{
            translateY: next.progress.interpolate({
              inputRange: [0, 1],
              outputRange: [0, -layouts.screen.height],
            }),
          }] : []),
        ],
      },
      // 添加背景遮罩效果
      overlayStyle: {
        opacity: current.progress.interpolate({
          inputRange: [0, 1],
          outputRange: [0, 0.3],
        }),
      },
    };
  },
}}

3. 解决Feed流与页面切换的手势冲突 #

如果你的IvoryFeedScreen是垂直滚动的Feed流（比如用FlatList），需要避免滚动Feed时误触页面切换手势。可以在Feed组件里动态控制页面手势的开启状态：

// 在IvoryFeedScreen组件中
import { FlatList, Dimensions } from 'react-native';

const screenHeight = Dimensions.get('window').height;

function IvoryFeedScreen({ navigation }) {
  return (
    <FlatList
      // ...你的Feed配置（数据源、渲染项等）
      scrollEventThrottle={16}
      onScroll={(e) => {
        const { contentOffset, contentSize } = e.nativeEvent;
        // 只有当滚动到Feed顶部或底部时，才允许触发页面切换手势
        const allowPageSwipe = contentOffset.y <= 0 || 
          contentOffset.y >= contentSize.height - screenHeight;
        
        navigation.setOptions({ gestureEnabled: allowPageSwipe });
      }}
    />
  );
}

这样设置后，用户在Feed流中间滚动时，只会滚动Feed内容；滑到顶部后下滑、滑到底部后上滑，才会触发页面切换，和TikTok的交互逻辑完全一致。

内容的提问来源于stack exchange，提问作者Shamoon