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

Question

React Navigation的介绍页面建议使用以下解构分配:

const { navigate } = this.props.navigation;

但是,当我在我的应用程序中实现React Navigation时,ESLint抱怨此行描述了这两个错误:

道具验证(反应/道具类型)中缺少"导航"

道具验证(react/prop-types)中缺少'navigation.navigation'

即使应用程序似乎按预期工作,如何删除这些错误行？

Answer 1

React.PropTypesprop-types自React v15.5以来已经进入包装(参见具有PropTypes的Typechecking).

它应该用来代替导入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,
};

Answer 2

今天的解决方案(因为默认情况下不再接受对象Proptype):

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

Answer 3

一种选择是将propTypesprop 添加到组件中.

例

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

另一个选项是禁用该页面和规则的eslint.更多信息在这里

规则选项

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

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

Answer 4

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

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

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