web-dev-qa-db-fra.com

Réaction Navigation 'navigation' est manquant dans la validation des accessoires

La page d'introduction de React Navigation suggère l'utilisation de la tâche de déstructuration suivante:

const { navigate } = this.props.navigation;

Cependant, lorsque j'ai implémenté React Navigation dans mon application, ESLint se plaint de cette ligne décrivant ces deux erreurs:

'navigation' est manquant dans la validation des accessoires (type de réaction/type)

'navigation.navigation' est manquant dans la validation des accessoires (rea/types-prop)

Même si l'application semble fonctionner comme prévu, comment serait-il possible de supprimer ces lignes d'erreur?

javascriptreact-nativereact-navigation
5
Vinícius Aguiar

Une option consiste à ajouter la propriété propTypes au composant.

Exemple

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

Une autre option consiste à désactiver eslint pour cette page et cette règle. Plus d'infos ici

Options de règle

Cette règle peut prendre un argument pour ignorer certains accessoires spécifiques pendant validation.

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

React.PropTypes est passé dans le package prop-types depuis React v15.5 (voir Vérification de type avec PropTypes ).

Il devrait être utilisé au lieu d'importer à partir de react-native (le package peut être ajouté au projet via npm install --save prop-types ou yarn add prop-types).

Et l'exemple de code conforme à "Le composant doit être écrit comme une fonction pure" règle comme suit:

// 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,
};
8
Gürol Canbek

Solution aujourd'hui (puisque l'objet Proptype n'est plus accepté par défaut):

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

En cas de navigation dans ES5, utilisez quelque chose comme ceci: 

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

dans ES6, utilisez ceci:

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

et 

import PropTypes from 'prop-types';

0
karolkarp