React Native中React Navigation多屏幕左右滑动切换实现方法咨询

方案1：使用Material Top Tab Navigator（推荐） #

该组件原生支持左右滑动切换标签页，是实现多屏幕滑动切换最直接的方式。

1. 安装依赖 #

先安装必要的依赖包：

npm install @react-navigation/material-top-tabs react-native-pager-view
# 或使用yarn
yarn add @react-navigation/material-top-tabs react-native-pager-view

2. 创建目标屏幕组件 #

定义需要切换的多个屏幕：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Screen1 = () => (
  <View style={styles.screen}>
    <Text>屏幕1</Text>
  </View>
);

const Screen2 = () => (
  <View style={styles.screen}>
    <Text>屏幕2</Text>
  </View>
);

const Screen3 = () => (
  <View style={styles.screen}>
    <Text>屏幕3</Text>
  </View>
);

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

3. 配置Top Tab导航 #

在导航容器中配置Top Tab Navigator，默认已支持滑动切换：

import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={{
          tabBarActiveTintColor: '#007AFF',
          tabBarInactiveTintColor: '#8E8E93',
          tabBarStyle: { backgroundColor: '#fff' },
          tabBarLabelStyle: { fontSize: 14 },
          // 显式启用滑动（默认已开启）
          swipeEnabled: true,
          // 开启切换动画
          animationEnabled: true,
        }}
      >
        <Tab.Screen name="Screen1" component={Screen1} options={{ title: '页面1' }} />
        <Tab.Screen name="Screen2" component={Screen2} options={{ title: '页面2' }} />
        <Tab.Screen name="Screen3" component={Screen3} options={{ title: '页面3' }} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

方案2：Stack Navigator配合手势（适合全屏滑动切换） #

如果需要全屏左右滑动切换栈内页面，可使用Stack Navigator的手势配置：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          // 启用左右滑动手势
          gestureEnabled: true,
          // 指定手势方向为水平（默认值）
          gestureDirection: 'horizontal',
        }}
      >
        <Stack.Screen name="Screen1" component={Screen1} options={{ title: '页面1' }} />
        <Stack.Screen name="Screen2" component={Screen2} options={{ title: '页面2' }} />
        <Stack.Screen name="Screen3" component={Screen3} options={{ title: '页面3' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

注意：Stack Navigator的滑动手势默认从屏幕边缘触发，若需全屏任意位置触发，需额外借助react-native-gesture-handler的PanGestureHandler自定义手势逻辑。

关键配置说明 #

• swipeEnabled: 控制Top Tab Navigator是否允许滑动切换（默认开启）
• gestureEnabled: 控制Stack Navigator是否启用滑动手势
• animationEnabled: 控制切换时是否显示动画效果

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