反应原生材料顶部选项卡导航器滑动禁用取决于屏幕 [英] react-native material top tab navigator swipe disable depending on screens

问题描述

只想禁用 Map 组件滑动，但在使用swipeEnabled"时应用了整个屏幕.

Wanna make only Map component swipe-disabled but the entire screens were applied when using "swipeEnabled".

我该怎么办?

const Tab = createMaterialTopTabNavigator();

const Tabs = () => {

  return (
    <Tab.Navigator
      swipeEnabled={false}  // <- Screens can be swiped but it is applied to every screen.
      {...}
    >
      <Tab.Screen
        name="Home"
        component={Home}
      />
      <Tab.Screen
        name="Map"
        component={Map}
      /> 
    </Tab.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <SafeAreaView style={styles.safeAreaView} />
      <Tabs />
    </NavigationContainer>
  );
}

推荐答案

您可以将状态值传递给 swipeEnabled 并将值更新为 false 如果您在Map 屏幕像这样:

You could pass a state value to swipeEnabled and update the value to false if you're on the Map screen like this:

const Tab = createMaterialTopTabNavigator();

const Tabs = () => {
  const [swipeEnabled, setSwipeEnabled] = useState(true);
  return (
    <NavigationContainer>
      <Tab.Navigator
        swipeEnabled={swipeEnabled}
        screenOptions={({ navigation, route }) => {
          if (route.name === 'Map' && navigation.isFocused()) {
            setSwipeEnabled(false);
          } else if (route.name !== 'Map' && navigation.isFocused()) {
            setSwipeEnabled(true);
          }
        }}>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Map" component={Map} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

这篇关于反应原生材料顶部选项卡导航器滑动禁用取决于屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！