React Native enable swipe navigation on tabs

Question

I am using react-navigation and I am having an issue with it. I am trying to make it so the application changes tabs when a user swipes. However, I can't get it to work.

I have tried gestureEnabled and swipeEnabled keys but it doesn't seem to have an effect.

What am I doing wrong?

App:

const { Navigator, Screen } = createStackNavigator();
return (
    <NavigationContainer>
      <Navigator>
        <>
          <Screen options={{headerShown: false}} name={'BottomTabsNavigator'} component={BottomTabsNavigator}/>
          {/* All other routes beside bottom Navigation ones go below */}
          <Screen options={{title: 'EditProfile'}} name="EditProfile" component={EditProfile} />
          <Screen options={{title: 'ChangePassword'}} name="ChangePassword" component={ChangePassword} />
        </>
      </Navigator>
    </NavigationContainer>
  )
);

BottomNavigator:

const { Navigator, Screen } = createBottomTabNavigator();
export const BottomTabsNavigator = () => {
  return (
    <Navigator>
      <Screen name="Home" component={Home} />
      <Screen name="Profile" component={Profile} />
    </Navigator>
  );
};

Edit:

这是 createMaterialBottomTabNavigator 的问题

• https://snack.expo.dev/_ESFgsWw3

设置屏幕必须一直滚动到底部

Answer 1

@react-navigation/bottom-tabs 不支持gestureEnabled和swipeEnabled

您可以使用createMaterialTopTabNavigator代替createMaterialBottomTabNavigator并将tabBarPosition选项设置为bottom

参考来自：- StackOverflow 答案