本文へ移動
バージョン: 6.x

React Navigation コントリビューターガイド

React Navigation の改善にご協力いただけませんか？ ご尽力に感謝いたします！

プロジェクトへのコントリビューション方法をいくつかご紹介します。

開始にあたって役立つリソースをいくつかご紹介します。

コントリビューション​

バグの報告​

コードを書いていると、時折バグが発生します。特に React Navigation は急速に進化しているので、バグは避けられません。バグを見つけたと思われる場合は、次の手順に従ってください。

  1. 既存の問題で、同様の問題がないか検索してください。 見つかった場合は、👍リアクションを追加してください（+1コメントはご遠慮ください）。コメントを読んで、スレッドにさらに有益な情報を提供できるかどうかを確認してください。
  2. 同様の問題がない場合は、新規の問題を作成してください。issue テンプレートに従ってください。

高品質な再現手順を作成することが重要です。再現手順がないと、バグを修正できない可能性が高く、理想的な状況では、それがライブラリのバグではなく、単にプロジェクトで誤って行われただけであることがわかります。即座にバグが修正されます！

ドキュメントの改善​

成功するプロジェクトには、高品質なドキュメントが必要です。React Navigation も例外ではありません。

react-navigation/react-navigation.github.io リポジトリでドキュメントの詳細をご覧ください。

問題への対応​

React Navigation に貢献するもう一つの素晴らしい方法は、問題に対応することです。誰かの質問に答える、コードの小さなタイプミスを指摘する、再現手順を作成するのを手伝うなどです。React Navigation でより積極的な役割に興味がある場合は、問題への対応から始めましょう。それは役立つだけでなく、あなたのコミットメントとコードの知識を示すからです！

バグ修正​

バグを見つけたら、修正しましょう！前述のように、バグは発生します。バグを見つけたら、次の手順に従ってください。

  1. そのバグに対処するプルリクエストが既に存在するかどうかを確認します。存在する場合は、レビューを行い、コメントを残してください。
  2. プルリクエストがまだない場合は、修正方法を考え出しましょう！比較的規模が小さい場合は、修正してプルリクエストを送信してください。変更がかなり多い場合は、まず問題を提起して議論しましょう（大規模なプルリクエストセクションを参照）。
  3. そのバグに関連する問題がある場合は、プルリクエストへのリンクを付けてコメントを残し、他の人が対処済みであることを知らせましょう。

貢献できる場所を確認するには、help wantedとgood first issueタグを確認してください！

機能の提案​

React Navigation で見てみたい機能はありますか？ Canny で機能リクエストを作成してください。

大規模なプルリクエスト​

プロジェクトの複数のファイルを追加/削除/変更する変更（新しい機能またはバグ修正）については、すぐにコードを書き始めないでください。その理由をいくつか説明します。

  1. 大規模なプルリクエストはレビューに時間がかかり、文脈を把握するのが難しい場合があります。
  2. 多くの場合、予想していたほど大きな変更を行う必要がないかもしれません。

そのため、次の提案があります。

  1. 問題を提起し、達成したいこととその方法を明確に定義します。
  2. コミュニティとメンテナーとソリューションについて議論します。文脈を提供し、エッジケースを確立し、設計を決定します。
  3. 行動計画を決定します。
  4. コードを書き、PR を送信します。
  5. PR をレビューします。時間がかかる場合がありますが、上記の手順に従っていれば、それほど時間はかからないでしょう。

このようにしたい理由は、全員の時間を節約するためです。その機能は既に存在するがドキュメント化されていないだけかもしれません。または、ライブラリに適合しないかもしれません。いずれにしても、主要な変更を事前に議論することで、あなた自身と他の人々の時間を節約できます。

情報​

Issue テンプレート​

問題を送信する前に、issue テンプレートを確認して、それに従ってください。これは、発生している問題を全員がよりよく理解し、必要な情報を取得するためのやり取りを減らすために役立ちます。

はい、issue テンプレートを完成させるには時間と労力がかかります。しかし、それは実際に回答を得るための高品質な質問をする唯一の方法です。

不完全な問題報告を作成するのに1分間かけて、何ヶ月も回答を待つ方が良いでしょうか？それとも、必要な要素をすべて含む高品質な問題報告を作成するのに20分間かけて、数日で回答を得る方が良いでしょうか？また、あなたの問題をレビューする時間を取ってくれる人々への敬意でもあります。

Pull Request テンプレート​

issue テンプレートと同様に、プルリクエストテンプレートは、プルリクエストがタイムリーにレビューされ、やり取りが減るようにするための手順を説明しています。コードを書き始める前に、必ず確認してください。

リポジトリのフォーク​

  • GitHub でrepoをフォークします。
  • ローカルにダウンロードしてインストールするには、ターミナルで次のコマンドを実行します。
git clone https://github.com/<USERNAME>/navigation-ex.git
cd navigation-ex
git remote add upstream https://github.com/react-navigation/react-navigation.git
yarn

このプロジェクトは、yarn workspacesとlernaによって管理されるパッケージに対してモノレポ構造を使用しています。すべてのパッケージは、packages/ディレクトリにあります。

コードレビューガイドライン​

周囲を確認します。コードベースの他の部分のスタイルに合わせます。このプロジェクトでは、ESLint を使用してプロジェクト全体の整合性を確保しています。プロジェクトをチェックするには、次を実行します。

yarn lint

エラーが発生した場合は、手動で修正するか、次を実行して自動的に修正を試みることができます。

yarn lint --fix

コードベースは TypeScript で記述されており、型チェックに合格する必要があります。ファイルを型チェックするには、次を実行します。

yarn typescript

プロジェクトに取り組んでいるときは、ウォッチモードで型チェックを実行すると便利です。そのためには、次を実行します。

yarn typescript --watch

サンプルアプリの実行​

サンプルアプリにはさまざまなパターンが含まれており、コントリビューターが変更を手動で統合テストするための簡単な方法として使用されます。

開発中は、Expoを使用してサンプルアプリを実行して、変更をテストできます。

yarn example start

テストの実行​

React Navigation は Jest で実装されたテストを持っています。これらを実行するには、React Navigation ディレクトリから、次のコマンドのいずれかを実行します（node_modules をインストールした後）。テストまたは型チェックを実行します。

yarn test

プロジェクトに取り組んでいるときは、ウォッチモードでテストを実行すると便利です。そのためには、次を実行します。

yarn test --watch

これらのコマンドは CI によって実行され、コントリビューションがマージされる前に合格する必要があります。