Question

React Navigation的introduction page建议使用以下解构分配：

const { navigate } = this.props.navigation;

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

道具验证（react / prop-types）中缺少
'navigation'
道具验证（react / prop-types）中缺少
'navigation.navigation'

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

Answer 1

自从React v15.5（见Typechecking with PropTypes）以来，

React.PropTypes已移入prop-types包。

应该使用它而不是从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

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

示例

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

另一个选项是禁用该页面和规则的eslint。更多信息here


规则选项

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

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

Answer 4

在ES5中导航的情况下，请使用以下代码：

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

在ES6中使用此：

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

和

import PropTypes from 'prop-types';

Answer 5

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

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

@reboot sudo python /home/pi/UDP_Python_Omxplayer.py

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

5 个答案: