React Native中能否禁用Drawer.Screen的点击功能？（附尝试代码）

我能否禁用“Survey Form”使其无法被点击？我在React Native应用中使用React Navigation实现抽屉导航，拥有一个Drawer.Screen组件，希望根据特定条件禁用该导航项的点击功能。我尝试了如下代码：

<Drawer.Screen
  name="SurveyForm"
  component={activeSurvey === 'active' ? SurveyForm : HomePage}
  options={{
    headerShown: false,
    drawerLabel: '- Survey Form',
    drawerLabelStyle: {
      color: activeSurvey === 'active' ? '#2D2D2D' : '#808080',
    },
  }}
/>

要实现条件禁用抽屉导航项的点击，推荐两种实用方法：

方法一：通过样式直接禁用点击交互 #

在options中根据条件设置drawerItemStyle的pointerEvents属性，当不需要可点击时设为'none'，直接阻止点击事件：

<Drawer.Screen
  name="SurveyForm"
  component={activeSurvey === 'active' ? SurveyForm : HomePage}
  options={{
    headerShown: false,
    drawerLabel: '- Survey Form',
    drawerLabelStyle: {
      color: activeSurvey === 'active' ? '#2D2D2D' : '#808080',
    },
    drawerItemStyle: {
      pointerEvents: activeSurvey === 'active' ? 'auto' : 'none',
    },
  }}
/>

方法二：自定义点击事件控制导航逻辑 #

如果需要更灵活的处理（比如禁用时添加提示），可以把options改成函数形式，自定义onPress方法，根据条件决定是否执行导航：

<Drawer.Screen
  name="SurveyForm"
  component={activeSurvey === 'active' ? SurveyForm : HomePage}
  options={({ navigation }) => ({
    headerShown: false,
    drawerLabel: '- Survey Form',
    drawerLabelStyle: {
      color: activeSurvey === 'active' ? '#2D2D2D' : '#808080',
    },
    onPress: () => {
      if (activeSurvey === 'active') {
        navigation.navigate('SurveyForm');
      }
      // 条件不满足时可添加提示逻辑，比如Toast提示
    },
  })}
/>

内容的提问来源于stack exchange，提问作者Raja Kumar