简体   繁体   English

React Native:底部标签按下不起作用

[英]React Native: bottom tab press not working

in my react-native app I have a bottom tabs navigation, I added a tabPress listener to one of the screens but for some reason now all screens don't work, I can't navigate to a different screen when I tap the icons...在我的 react-native 应用程序中,我有一个底部选项卡导航,我在其中一个屏幕上添加了一个 tabPress 侦听器,但由于某种原因,现在所有屏幕都不起作用,当我点击图标时,我无法导航到另一个屏幕...

The objective was to lock a screen depending of the day but now ALL screens are locked for some reason and I can't navigate to ANY screen!目标是根据日期锁定屏幕,但现在由于某种原因所有屏幕都被锁定,我无法导航到任何屏幕!

<Tab.Navigator /* options here... */>
        <Tab.Screen name="Descubre" component={STACK1} />
        <Tab.Screen name="Favoritos" component={STACK2} 
        listeners={{
          tabPress: (e) => {
              if(root.mapStore.isoWeekDay == 6)
              {
                e.preventDefault();
              }
          },
        }}
        />
        <Tab.Screen name="Pedidos" component={STACK3} />
        <Tab.Screen name="Más" component={STACK4}/>
    </Tab.Navigator>

I'm guessing this is the default behaviour stablished by React Native for this event, check section Listening to events我猜这是 React Native 为这个事件建立的默认行为,查看监听事件部分

If you want only to block one of the screens in this point, you could do the following:如果您此时只想屏蔽其中一个屏幕,您可以执行以下操作:

<Tab.Navigator>
<Tab.Screen name="Screen 1" />
<Tab.Screen name="Screen 2"
    options={{
        tabBarButton: disabled ? DisabledTabBarButton : EnabledTabBarButton,
    }}
/>
</Tab.Navigator>

Where DisabledTabBarButton is: DisabledTabBarButton 在哪里:

const DisabledTabBarButton = ({ style, ...props }: BottomTabBarButtonProps) => (
    <Pressable disabled style={[{ opacity: 0.2 }, style]} {...props} />
)

And enabled one:并启用了一个:

const EnabledTabBarButton = ({ style, ...props }: BottomTabBarButtonProps) => (
    <Pressable style={[{ opacity: 1 }, style]} {...props} />
)

Also, you could do the following while creating your tab navigator:此外,您可以在创建选项卡导航器时执行以下操作:

const TabNavigator = createBottomTabNavigator({
First:{
    screen: First,
},
Second:{
    screen: Second,
},
Third:{
    screen: Third,
}
}, defaultNavigationOptions: ({ navigation }) => ({
  tabBarOnPress: ({ navigation, defaultHandler }) => {
    if (
      navigation.state.routeName === "Route disabled"
    ) {
      return null;
    }
    defaultHandler();
  },})

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM