web-dev-qa-db-ja.com

Reactナビゲーション「ナビゲーション」が小道具の検証にありません

React Navigationの 紹介ページ は、次の構造化割り当ての使用を提案しています。

const { navigate } = this.props.navigation;

ただし、アプリでReact Navigationを実装すると、ESLintはこれらの両方のエラーを説明するこの行について不平を言っています。

小道具の検証に「ナビゲーション」がありません（react/prop-types）

「navigation.navigation」が小道具の検証にありません（react/prop-types）

アプリは意図したとおりに動作しているように見えますが、これらのエラー行を削除するにはどうすればよいでしょうか？

javascriptreact-nativereact-navigation
10
Vinícius Aguiar

1つのオプションは、propTypes propをコンポーネントに追加することです。

例

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

別のオプションは、そのページとルールのeslintを無効にすることです。詳細 こちら

ルールオプション

このルールは、検証中に特定の小道具を無視するために1つの引数を取ることができます。

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

React.PropTypesは、React v15.5（ 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,
};
13
Gürol Canbek

今日の解決策（オブジェクトProptypeはデフォルトで受け入れられなくなったため）：

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

Projectがほぼすべてのコンポーネントへのナビゲーションを必要とする場合。特定の小道具のリンティングを黙らせることもできます。

Eslint構成に以下を追加します。

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

ES5でのナビゲーションの場合、次のようなものを使用します。

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

eS6ではこれを使用します。

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

そして

import PropTypes from 'prop-types';

0
karolkarp