反应本机：底部标签不起作用

发布于 2025-02-13 05:02:50 字数 710 浏览 0 评论 0原文

在我的React-native应用程序中，我有一个底部标签导航，我在其中一个屏幕上添加了一个TabPress侦听器，但是由于某些原因，现在所有屏幕都不起作用，当我点击图标时，我无法导航到其他屏幕。 ..

目的是根据一天的屏幕锁定屏幕，但是现在由于某种原因，所有屏幕都锁定了，我无法导航到任何屏幕！

<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>

原文

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...

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

赏烟花じ飞满天 2025-02-20 05:02:50

我猜这是此事件中的React本机构成的默认行为，请检查 fivest fivest < /a>

如果您只想阻止其中一个屏幕，则可以执行以下操作：

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

在哪里disabledtabbarbutton是：

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

并启用了一个：

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

另外，您在创建标签导航器时可以执行以下操作：

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();
  },})

I'm guessing this is the default behaviour stablished by React Native for this event, check section Listening to events

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:

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();
  },})

回复收藏 0 原文

~没有更多了~