道具验证中缺少 React Navigation 'navigation'

Question

React Navigation 的 introduction page 建议使用以下解构赋值：

const { navigate } = this.props.navigation;

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

'navigation' is missing in props validation (react/prop-types)

'navigation.navigation' is missing in props validation (react/prop-types)

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

Answer 1

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

例子

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

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

Rule Options

This rule can take one argument to ignore some specific props during validation.
...
"react/prop-types": [<enabled>, { ignore: <ignore>, customValidators: <customValidator> }]
...

Answer 2

今天的解决方案（因为默认情况下不再接受对象 Proptype）：

export default class LoginScreen extends Component {
  static propTypes = {
    navigation: PropTypes.shape({
      navigate: PropTypes.func.isRequired,
    }).isRequired,
  }
}

Answer 3

React.PropTypes 自 React v15.5 以来已移入 prop-types 包（参见 Typechecking with PropTypes）。

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

符合"Component should be written as a pure function"规则的示例代码如下：

// 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,
};

Answer 4

如果在 ES5 中导航，请使用如下内容：

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

在 ES6 中使用这个：

static PropTypes = {
  navigation: PropTypes.object.isRequired,
};

和

import PropTypes from 'prop-types';

Answer 5

当 Project 需要导航到几乎所有组件时。我们还可以让特定道具的 linting 静音。

通过在 eslint 配置中添加以下内容：

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

道具验证中缺少 React Navigation 'navigation'

React Navigation 'navigation' is missing in props validation

javascript

react-native

react-navigation