阻止/禁用 TabNavigator 中的选项卡 - 反应导航答案

【问题标题】：Block/Disable tabs in TabNavigator - react-navigation阻止/禁用 TabNavigator 中的选项卡 - 反应导航
【发布时间】：2018-01-20 05:07:38
【问题描述】：

我有一个如图所示的 TabNavigator。 Header Image

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

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

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

我尝试阻止这些标签，如 here 所示，但我想我错过了一些东西。我的尝试：

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

};

【问题讨论】：

标签： react-native react-native-android react-navigation react-native-ios tabnavigator

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您必须在 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();
      },})

【讨论】：

【解决方案3】：

在这种情况下，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 调试器在一段非常相似的代码中的断点处停止的图像（选项卡名称不同），但它显示了传递给此函数的“动作”对象的值。

【讨论】：

@JeremySchrader 你能告诉请如何动态删除标签吗？
我无法让这个解决方案发挥作用（即使它包含在reactnavigation.org/docs/en/… 的官方文档中），我很困惑。相比之下，我发现从 tabBarOnPress 返回 null ，正如下面 Asif 所建议的那样，确实会阻止导航。但是，我正在尝试创建一个以先前路由为条件的块（它需要 getStateForAction 中可用的状态信息），但从 getStateForAction 返回 null 无效。关于如何继续或进一步调试的任何线索？
要回答我自己上面的问题：我发现我必须为 Tab_Navigator 中的每个屏幕创建一个 StackNavigator（每个 StackNavigator 包含一个屏幕），然后在我的Tab_Navigator 而不是屏幕列表。我不知道为什么会这样，但它允许 getStateForAction 阻止导航操作（否则不起作用）。