React Native:底部标签不工作

Question

在我的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>

Answer 1

我猜这是由React Native为这个事件建立的默认行为，检查一节侦听事件

如果您只想在此时阻塞其中一个屏幕，您可以执行以下操作:

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

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