8

如图所示，我有一个 TabNavigator。 标题图片

我正在使用 TabNavigator 创建这些选项卡，如下所示。

const Tab_Navigator = TabNavigator({
    First:{
        screen: First,
    },
    Second:{
        screen: Second,
    },
    Third:{
        screen: Third,
    },

现在我想阻止/禁用“第二”和“第三”选项卡。它应该是可见的，但不能导航到它们。

我尝试阻止这些选项卡，如此处所示，但我想我错过了一些东西。我的尝试：

Tab_Navigator.router.getStateForAction = (action, state) => {
if( action.type === NavigationActions.navigate({ routeName: "Second"}) ||
    action.type === NavigationActions.navigate({ routeName: "Third"}))
{
    return null;
}

return Byte.router.getStateForAction(action, state);

};

4

3 回答 3

15

在这种情况下，action.type = "Navigation/NAVIGATE" 和 action.routeName 是您的选项卡的名称。它与 ReactNavigation Routers 示例略有不同。以下应该有效：

const defaultGetStateForAction = Tab_Navigator.router.getStateForAction;

Tab_Navigator.router.getStateForAction = (action, state) => {
  if ((action.type === NavigationActions.NAVIGATE) &&
     (action.routeName === "Second" || action.routeName === "Third") {
    return null;
  }

  return defaultGetStateForAction(action, state);
};

编辑：这是 Chrome 调试器在一段非常相似的代码中在断点处停止的图像（选项卡名称不同），但它显示了传递给此函数的“动作”对象的值。 反应本机路由器禁用选项卡

于 2017-08-11T23:10:16.110 回答
3

您必须在 defaultNavigationOptions 下使用 tabBarOnPress 属性，并检查您不想导航到的路由名称，将它们返回 null，否则返回 defaultHandler。请检查以下代码

const Tab_Navigator = createBottomTabNavigator({
   First:{
        screen: First,
    },
    Second:{
        screen: Second,
    },
    Third:{
        screen: Third,
    }
}, defaultNavigationOptions: ({ navigation }) => ({
      tabBarOnPress: ({ navigation, defaultHandler }) => {
        if (
          navigation.state.routeName === "Second" ||
          navigation.state.routeName === "Third"
        ) {
          return null;
        }
        defaultHandler();
      },})
于 2019-05-09T07:31:00.517 回答
3

tabBarButton这是我在 React Navigation 6 中禁用和完全控制的解决方案。

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

const Tab = createBottomTabNavigator()

const Router = () => (
<Tab.Navigator>
  <Tab.Screen name="Screen 1" />
  <Tab.Screen name="Screen 2"
    options={{
      // Applying the disabled button
      tabBarButton: DisabledTabBarButton,
    }}
  />
</Tab.Navigator>

export default Router
于 2021-09-29T06:29:11.627 回答