javascript 道具验证中缺少 React Navigation“导航”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46868188/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Navigation 'navigation' is missing in props validation
提问by Vinícius Aguiar
React Navigation's introduction pagesuggests the use of the following destructuring assignment:
React Navigation 的介绍页面建议使用以下解构赋值：
const { navigate } = this.props.navigation;
However, when I implemented React Navigation in my App, ESLint is complaining about this line describing these both errors:
然而，当我在我的应用程序中实现 React Navigation 时，ESLint 抱怨这行描述了这两个错误：
'navigation' is missing in props validation (react/prop-types)
'navigation.navigation' is missing in props validation (react/prop-types)
道具验证中缺少“导航”（反应/道具类型）
道具验证中缺少“navigation.navigation”（反应/道具类型）
Even though the app seems to be working as intended, how would it be possible to remove these error lines?
即使应用程序似乎按预期工作，如何才能删除这些错误行？
采纳答案by bennygenel
One option is to add the propTypesprop to the component.
一种选择是将propTypes道具添加到组件中。
Example
例子
LoginScreen.propTypes = {
navigation: PropTypes.object.isRequired,
};
Another option is to disable eslint for that page and rule. More info here
另一种选择是禁用该页面和规则的 eslint。更多信息在这里
Rule Options
This rule can take one argument to ignore some specific props during validation.
... "react/prop-types": [<enabled>, { ignore: <ignore>, customValidators: <customValidator> }] ...
规则选项
此规则可以采用一个参数来在验证期间忽略某些特定的道具。
... "react/prop-types": [<enabled>, { ignore: <ignore>, customValidators: <customValidator> }] ...
回答by Gürol Canbek
React.PropTypeshas moved into the prop-typespackage since React v15.5 (see Typechecking with PropTypes).
React.PropTypesprop-types自 React v15.5 以来已移入包中（请参阅使用PropTypes 进行类型检查）。
It should be used instead of importing from react-native(the package can be added into the project via npm install --save prop-typesor yarn add prop-types).
应该使用它而不是从导入react-native（可以通过npm install --save prop-types或将包添加到项目中yarn add prop-types）。
And the example code complying with "Component should be written as a pure function" rule as follows:
并且符合“组件应该写为纯函数”规则的示例代码如下：
// 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,
};
回答by mcabe
Solution today (since object Proptype isn't accepted by default anymore):
今天的解决方案（因为默认情况下不再接受对象 Proptype）：
export default class LoginScreen extends Component {
static propTypes = {
navigation: PropTypes.shape({
navigate: PropTypes.func.isRequired,
}).isRequired,
}
}
回答by karolkarp
In case of navigation in ES5 use something like this:
如果在 ES5 中导航，请使用以下内容：
LoginScreen.propTypes = {
navigation: PropTypes.object.isRequired,
};
in ES6 use this:
在 ES6 中使用这个：
static PropTypes = {
navigation: PropTypes.object.isRequired,
};
and
和
import PropTypes from 'prop-types';
import PropTypes from 'prop-types';
回答by Athul Raj
When Project needs navigation to almost all componenets. We can also silence the linting for that specific prop.
当 Project 需要导航到几乎所有组件时。我们还可以使该特定道具的 linting 静音。
By adding the following in the eslint configuration:
通过在 eslint 配置中添加以下内容：
"rules": {
"react/prop-types": ["error", { "ignore": ["navigation"] }]
}
