我如何通过 eslint 检查 this.props.navigation.navigate（react-navigation）？答案

【问题标题】：How do i pass eslint checking for this.props.navigation.navigate (react-navigation)?我如何通过 eslint 检查 this.props.navigation.navigate（react-navigation）？
【发布时间】：2018-03-16 16:15:36
【问题描述】：

我在我的 react native 项目中使用 eslint airbnb。如果我没有验证道具，特别是来自react-navigation 的道具，eslint 会抛出错误 linting。

如何使用 PropTypes 验证这一点？

我正在尝试像这样验证它：

IntroScreen.propTypes = {
  navigation: PropTypes.shape({
    navigate: PropTypes.func,
  }),
};

但仍然出现这样的错误 linting

我如何传递默认道具，我应该如何传递？

【问题讨论】：

标签： eslint react-navigation react-proptypes

【解决方案1】：

我正在通过设置所需的导航和导航道具来修复它。

IntroScreen.propTypes = {
  navigation: PropTypes.shape({
    navigate: PropTypes.func.isRequired,
  }).isRequired,
};

如果我们将 props 设置为可选，eslint 会强制我们提供要设置的默认 props。因此，如果我们将 props 设置为必需，eslint 将不会再次警告您。

【讨论】：

这是最好的答案，因为它实际上回答了问题而不是建议绕过。

【解决方案2】：

除了answer by Dede 之外，有时您的项目可能会向（基本上）所有组件添加导航。为导航添加道具验证是一项不必要的任务，然后您不妨静默该特定道具的 linting。

您可以通过在 eslint 配置中添加以下内容来做到这一点：

"rules": {
     "react/prop-types": ["error", { "ignore": ["navigation"] }]
}

请记住，您需要确保在使用之前确实将导航添加到您的组件中。

【讨论】：

这应该是答案。
“规则”在哪里？在用户设置中？在工作区设置中？只是简单的旧“规则”还是在“eslint”或其他东西下？
你的 eslint 是在你的 eslint 配置文件中配置的。它可以有不同的格式。引用 eslint.org 网站：“这可以是 .eslintrc.* 文件的形式，也可以是 package.json 文件中的 eslintConfig 字段的形式，ESLint 都会自动查找和读取这两个字段”您可以在此处进一步阅读链接：eslint.org/docs/user-guide/configuring