道具验证中缺少 React Navigation“导航”

Question

React Navigation 的 介绍页面 建议使用以下解构赋值：

 const { navigate } = this.props.navigation;

然而，当我在我的应用程序中实现 React Navigation 时，ESLint 抱怨这行描述了这两个错误：

道具验证中缺少“导航”（反应/道具类型）

道具验证中缺少“navigation.navigation”（反应/道具类型）

即使该应用程序似乎按预期运行，如何才能删除这些错误行？

原文由 Vinícius Figueiredo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

一种选择是将 propTypes 添加到组件。

例子

LoginScreen.propTypes = {
  navigation: PropTypes.object.isRequired,
};

另一种选择是为该页面和规则禁用 eslint。更多信息 在这里

规则选项

此规则可以采用一个参数来在验证期间忽略某些特定的道具。

 ...
"react/prop-types": [<enabled>, { ignore: <ignore>, customValidators: <customValidator> }]
...

原文由 bennygenel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

React.PropTypes 已移入 prop-types 自 React v15.5 以来的包（请参阅 使用 PropTypes 进行类型检查）。

应该使用它而不是从 react-native 导入（可以通过 npm install --save prop-types 或 yarn add prop-types 将包添加到项目中）。

遵循“组件应该写成纯函数”规则的示例代码如下：

 // In addition to other imports:
import PropTypes from 'prop-types';

const LoginScreen = ({ navigation }) => (
  <View>
    <Button
      title="Login"
      onPress={() => navigation.navigate('MainScreen')}
    />
  </View>
);

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

原文由 Gürol Canbek 发布，翻译遵循 CC BY-SA 3.0 许可协议