「announcement」タグ付き投稿 51件

2018年、React Nativeコミュニティは、React Nativeの開発方法とコミュニケーション方法に多くの変更を加えました。数年後、このシフトがReact Nativeにとって転換点であったと振り返ることになるでしょう。

多くの人が、Fabricとして広く知られているReact Nativeのアーキテクチャの書き換えに期待を寄せています。Fabricは、React Nativeのアーキテクチャにおける根本的な制限を解消し、JSIとTurboModulesと共に、React Nativeの将来の成功を確実なものにするでしょう。

2018年における最大の変化は、React Nativeコミュニティのエンパワーメントでした。当初からFacebookは、世界中の開発者がReact Nativeのオープンソースプロジェクトに参加することを奨励してきました。それ以来、リリースプロセスなどを処理する多くのコアコントリビューターが登場しました。

これらのメンバーは、以下のリソースを使用して、コミュニティ全体をよりエンパワーメントし、このプロジェクトの未来を形作るためのいくつかの重要なステップを踏み出しました。

react-native-releases 📬​

1月に作成されたこのリポジトリは、誰もがより協調的な方法で新しいリリースを最新の状態に保つことを可能にし、特定のリリースに何が含まれるかについての会話を、チェリーピックを提案したい人々に開きました（0.57.8とその以前のすべてのバージョンなど）。

これは、毎月のリリースサイクルから離れ、現在バージョン0.57.xで使用されている「長期サポート」アプローチに移行する原動力となっています。

これらの決定に至るまで、半分は今年作成されたもう一つのリポジトリによるものです。

discussions-and-proposals 🗣​

7月に作成されたこのリポジトリは、React Nativeに関する会話のためのよりオープンな環境というアイデアを拡大しました。以前は、このニーズは、メインリポジトリでFor Discussionというラベルが付いたissueによって処理されていましたが、この戦略を他のライブラリ（例：React）が採用しているRFCアプローチに拡大したいと考えていました。

この実験は、すぐにReact Nativeのライフサイクルにおいて役割を見出しました。Facebookチームは現在、コミュニティのRFCプロセスを使用して、React Nativeを改善できる点について話し合い、Lean Coreプロジェクトを中心とした取り組みを調整しています - その他の興味深い議論も含まれています。

@ReactNativeComm 🐣​

私たちは、これらの取り組みを伝えるためのアプローチが、私たちが望んでいたほど効果的ではなかったことを認識しており、皆さんにReact Nativeコミュニティ（リリースからアクティブな議論まで）で起こっているすべてのことを簡単に把握できるようにするために、@ReactNativeCommという新しいTwitterアカウントを作成しました。

そのソーシャルネットワークにいない場合は、GitHub経由で常にリポジトリを監視できることを覚えておいてください。この機能はここ数ヶ月で、リリースのみを通知できる可能性が向上したため、いずれにしても使用することを検討する必要があります。

今後の展望 🎓​

過去7〜8ヶ月間、コアコントリビューターはReact Native Community GitHub組織を強化し、React Nativeの開発においてより多くの責任を負い、Facebookとの協力を強化しました。しかし、これには常に、同様のプロジェクトが備えている正式な構造が不足していました。

この組織は、そこにホストされているすべてのパッケージ/リポジトリに対して一連の標準を適用し、メンテナーがお互いに助け合い、コミュニティで合意された標準に準拠した高品質のコードに貢献するための単一の場所を提供することにより、より大きな開発者コミュニティ内のすべての人の模範となることができます。

2019年初頭には、この新しいガイドラインが導入されます。専用のディスカッションで、ご意見をお聞かせください。

これらの変更により、コミュニティがより協調的になり、1.0に到達したとき、私たちは皆、この共同の努力を活用して（さらに）素晴らしいアプリを書き続けることができると確信しています 🤗

このコミュニティの未来について、私たちと同じくらい興奮していただければ幸いです。上記のリストに記載されているリポジトリで行われている会話、またはあなたが作成する素晴らしいコードのいずれかに参加してくださることを楽しみにしています。

楽しいコーディングを！

今年、React NativeチームはReact Nativeの大規模な再設計に重点を置いてきました。Sophieが彼女のState of React Nativeの投稿で述べたように、Facebook以外のReact Nativeユーザーと協力者の繁栄するコミュニティをより良くサポートするための計画を立ててきました。今回、取り組んできた内容の詳細を共有する時が来ました。その前に、オープンソースにおけるReact Nativeの長期的なビジョンを説明したいと思います。

React Nativeに対する私たちのビジョンは…

• 健全なGitHubリポジトリ。 問題とプルリクエストは妥当な期間内に処理されます。
  • テストカバレッジの向上。
  • Facebookコードリポジトリから同期されたコミットは、オープンソースのテストを壊してはなりません。
  • より多くの意味のあるコミュニティ貢献。
• 安定したAPI。 オープンソースの依存関係とのインターフェースを容易にします。
  • Facebookはオープンソースと同じ公開APIを使用します。
  • セマンティックバージョニングに従ったReact Nativeリリース。
• 活気のあるエコシステム。 コミュニティによって維持される高品質のViewManager、ネイティブモジュール、および複数のプラットフォームのサポート。
• 優れたドキュメント。 ユーザーが高品質なエクスペリエンスを作成するのを支援することに重点を置き、最新のAPIリファレンスドキュメントを提供します。

このビジョンを実現するために、次の重点分野を特定しました。

✂️ Lean Core​

私たちの目標は、コアではないコンポーネントや未使用のコンポーネントを削除することにより、React Nativeの表面積を削減することです。コアではないコンポーネントはコミュニティに移管し、より迅速な開発を可能にします。表面積を削減することで、React Nativeへの貢献をより簡単に管理できます。

WebViewは、コミュニティに移管されたコンポーネントの例です。リポジトリから削除した後も、内部チームがこれらのコンポーネントを引き続き使用できるワークフローに取り組んでいます。他にも数十個のコンポーネントをコミュニティに所有権を移管する予定です。

🎁 内部機能のオープンソース化と🛠ツール類のアップデート​

FacebookのプロダクトチームにとってのReact Native開発エクスペリエンスは、オープンソースとはかなり異なる場合があります。オープンソースコミュニティで人気のあるツールは、Facebookでは使用されていない場合があります。同じ目的を達成する内部ツールが存在する可能性があります。場合によっては、FacebookチームはFacebookの外には存在しないツールに慣れてしまっています。これらの違いは、今後のアーキテクチャの作業をオープンソース化する際に課題となる可能性があります。

これらの内部ツールのいくつかをリリースすることに取り組んでいます。また、オープンソースコミュニティで人気のあるツールのサポートも改善します。取り組むプロジェクトの非網羅的なリストを以下に示します。

• JSIをオープンソース化し、コミュニティが独自のJavaScript VMを持ち込み、RNの最初のリリースからの既存のJavaScriptCoreを置き換えることを可能にします。JSIとは何かについては、今後の投稿で説明します。それまでの間、React ConfでのParashuramの講演でJSIの詳細を学ぶことができます。
• Androidで64ビットライブラリをサポートします。
• 新しいアーキテクチャでのデバッグを有効にします。
• CocoaPods、Gradle、Maven、および新しいXcodeビルドシステムのサポートを改善します。

✅ テストインフラストラクチャ​

Facebookのエンジニアがコードを公開する場合、すべてのテストに合格すれば安全にマージできると考えられています。これらのテストでは、変更によって独自のReact Nativeサーフェスが壊れる可能性があるかどうかを特定します。しかし、FacebookがReact Nativeを使用する方法には違いがあります。これにより、知らず知らずのうちにオープンソースでReact Nativeを壊してしまうことがありました。

オープンソース環境にできるだけ近い環境で内部テストを実行するように強化します。これにより、これらのテストを壊すコードがオープンソースに到達するのを防ぐことができます。また、GitHubでコアリポジトリのテストをより適切に行うためのインフラストラクチャに取り組み、将来のプルリクエストにテストを簡単に含めることができるようにします。

表面積の縮小と組み合わせることで、コントリビューターはプルリクエストをより迅速かつ自信を持ってマージできるようになります。

📜 公開API​

Facebookは、オープンソースと同じように公開APIを介してReact Nativeを使用し、意図しない破壊的変更を減らします。これに対処するために、内部の呼び出しサイトの変換を開始しました。私たちの目標は、安定した公開APIに収束し、バージョン1.0でセマンティックバージョニングを採用することです。

📣 コミュニケーション​

React Nativeは、コントリビューター数でGitHubのトップオープンソースプロジェクトの1つです。私たちはそれをとても嬉しく思っており、それを続けたいと思っています。透明性の向上やオープンな議論など、熱心なコントリビューターにつながる取り組みを継続していきます。ドキュメントは、React Nativeの初心者にとって最初に遭遇するものの1つですが、これまで優先事項ではありませんでした。自動生成されたAPIリファレンスドキュメントの復活、高品質なユーザーエクスペリエンスの作成に焦点を当てた追加コンテンツの作成、およびリリースノートの改善から始め、それを修正したいと思います。

タイムライン​

これらのプロジェクトは今後1年ほどで完了する予定です。これらの取り組みの中には、既にオープンソースにマージされているJSIなど、既に進行中のものもあります。表面積の削減など、完了までに時間がかかるものもあります。進捗状況については、コミュニティに最新情報を提供するよう最善を尽くします。Discussions and Proposalsリポジトリにご参加ください。これはReact Nativeコミュニティによる取り組みで、このロードマップで説明されているいくつかの取り組みの作成につながっています。

待望のReact Native 0.56バージョンがリリースされました🎉。このブログ投稿では、この新しいリリースで導入された変更点の一部をハイライトしています。また、3月以降、私たちが何に取り組んできたのかを説明する機会にもしたいと思います。

破壊的変更のジレンマ、または「いつリリースするか？」​

コントリビューターガイドでは、React Nativeへのすべての変更が進む統合プロセスについて説明しています。このプロジェクトはさまざまなツールで構成されており、すべてを適切に機能させるために調整と継続的なサポートが必要です。これに加えて、プロジェクトに貢献する活気のあるオープンソースコミュニティがあり、その規模の大きさがわかります。

React Nativeの印象的な普及率を考えると、破壊的変更は細心の注意を払って行う必要があり、プロセスは私たちが望むほどスムーズではありません。4月と5月のリリースをスキップし、コアチームが新しい破壊的変更のセットを統合してテストできるようにするという決定が下されました。専用のコミュニティコミュニケーションチャネルがその過程で使用され、2018年6月（0.56.0）のリリースが、安定版を辛抱強く待っていた人にとってできるだけ問題なく採用できるようにされました。

0.56.0は完璧ですか？いいえ、他のすべてのソフトウェアと同じです。しかし、「より多くの安定性を待つ」ことと「テストが成功した結果につながったので、前進できる」ことのトレードオフにおいて、リリースする準備が整っていると感じています。さらに、最終的な0.56.0リリースでは解決されていないいくつかの問題があることを認識しています。ほとんどの開発者は、0.56.0にアップグレードする際に問題はありません。上記の課題によってブロックされている場合は、ディスカッションでお会いできることを願っており、これらの課題の解決策を一緒に探していきたいと思います。

0.56.0は、より安定したフレームワークに向けた基本的な構成要素と考えることができます。すべてのエッジケースが解決されるまでにはおそらく1、2週間の広範な採用が必要になりますが、これにより、2018年7月（0.57.0）のリリースがさらに向上します。

このセクションの最後に、合計818コミット（！）で作業した67人のコントリビューターの皆さんに感謝いたします👏。これにより、アプリがさらに向上します。

それでは、早速…

大きな変更点​

Babel 7​

ご存知かもしれませんが、最新のJavaScriptの機能を使用可能にするトランスパイラツールであるBabelは、間もなくv7にアップデートされます。この新バージョンには重要な変更が含まれるため、この機会にアップグレードを行い、Metroがその改善点を活用できるようにするのが良い時期だと考えました。

アップグレードでお困りの場合は、関連するドキュメントセクションを参照してください。

Androidサポートの近代化​

Androidでは、周辺ツールの多くが変更されました。Gradle 3.5、Android SDK 26、Fresco 1.9.0、OkHttp 3.10.0、さらにはNDK APIターゲットをAPI 16にアップデートしました。これらの変更は問題なく動作し、ビルド速度が向上するはずです。さらに重要なのは、来月施行される新しいPlayストアの要件への準拠に役立つことです。

これに関して、実現のために多くのPRを送信してくださったDulmandakhさんに特に感謝申し上げます 👏。

この方向にはまだいくつかのステップが必要であり、Androidサポートの更新に関する今後の計画と議論は、専用のissue（およびJSCに関する別のissue）で確認できます。

新しいNode、Xcode、React、Flow – わぁ！​

Node 8がReact Nativeの標準になりました。実際にはすでにテストされていましたが、Node 6がメンテナンスモードに入ったため、本格的に移行しました。Reactも16.4にアップデートされ、多くの修正が加えられました。

iOS 8のサポートを終了し、iOS 9をターゲット可能な最も古いiOSバージョンにしました。iOS 8を実行できるデバイスはすべてiOS 9にアップグレードできるため、これは問題ないと考えています。この変更により、古いiOS 8デバイスの回避策を実装した、ほとんど使用されないコードを削除することができました。

継続的インテグレーションツールチェーンは、Xcode 9.4を使用するようにアップデートされ、すべてのiOSテストがAppleが提供する最新の開発ツールで実行されるようになりました。

新しいエラー形式を多くの開発者が高く評価しているため、Flow 0.75にアップグレードしました。また、より多くのコンポーネントの型を作成しました。プロジェクトで静的型付けをまだ適用していない場合は、実行時ではなくコーディング中に問題を特定するためにFlowの使用を検討してください。

そして、他にも多くの変更が…​

たとえば、YellowBoxは新しい実装に置き換えられ、デバッグが大幅に改善されました。

完全なリリースノートについては、こちらの完全な変更ログを参照してください。また、この新バージョンへの移行における問題を回避するために、アップグレードガイドを常に確認してください。

最後に、今週からReact Nativeコアチームは毎月のミーティングを再開します。カバーされている内容をすべての人に伝え、今後のミーティングのために皆様からのフィードバックを参考にします。

皆様、楽しいコーディングを！

Lorenzo、Ryan、およびReact Nativeコアチーム全体

追伸：常に言っていることですが、React Nativeはまだ多くの変更が進行中であるため、0.xのバージョニングを使用しています。そのため、アップグレード時には、何かがクラッシュしたり、壊れたりする可能性があることを忘れないでください。問題やPRの提出時には互いに協力し合い、CoCに従ってください。画面の向こうには常に人がいることを忘れないでください。

React Nativeが導入された直後から、コミュニティが新しい機能を採用できるように、安定したバージョンのまま、2週間ごとにリリースを始めました。Facebookでは、本番環境のiOSアプリのリリースのために、2週間ごとにコードベースを安定させる必要があったため、オープンソースバージョンも同等のペースでリリースすることにしました。現在、Facebookの多くのアプリ、特にAndroidアプリは週1回リリースされています。masterブランチから毎週リリースするため、非常に安定した状態を維持する必要があります。そのため、2週間ごとのリリースサイクルは、社内開発者にももはやメリットがありません。

リリース頻度についていくのが難しいというフィードバックをコミュニティから頻繁に聞いています。Expoなどのツールは、急速なバージョンの変更に対処するために、リリースを隔週にスキップする必要がありました。したがって、2週間ごとのリリースはコミュニティにとってあまり役立っていなかったことは明らかです。

月次リリースへ​

新しい月次リリースサイクルと、先月安定化され、採用準備が整った12月2016年リリースのv0.40を発表できることを嬉しく思います。（iOSのネイティブモジュールでヘッダーを更新することを忘れないでください）。

週末を避けるため、または予期せぬ問題に対処するために数日ずれる場合がありますが、毎月1日にリリース候補が公開され、月末にリリースされることを期待できます。

最高のサポートを受けるには当月のバージョンを使用してください​

1月のリリース候補を試すことができます。新機能はこちらで確認できます。

今後の変更を確認し、React Native開発者により良いフィードバックを提供するには、可能な限り常に当月のリリース候補を使用してください。月末に各バージョンがリリースされる頃には、そのバージョンに含まれる変更は、Facebookの製品アプリで2週間以上運用されています。

新しいreact-native-git-upgradeコマンドを使用して、アプリを簡単にアップグレードできます。

npm install -g react-native-git-upgrade
react-native-git-upgrade 0.41.0-rc.0

この簡素化されたアプローチにより、コミュニティがReact Nativeの変更を追跡し、新しいバージョンをできるだけ早く採用することが容易になることを願っています！

(この計画を考案したMartin Konicekさんと、実現させたMike Grabowskiさんに感謝します)

React Nativeの新バージョンへのアップグレードは困難でした。このような経験をしたことがあるかもしれません。

これらのオプションはいずれも理想的ではありません。ファイルを上書きすると、ローカルの変更が失われます。上書きしないと、最新のアップデートが取得できません。

今日、この問題の解決に役立つ新しいツールを紹介できることを誇りに思います。このツールはreact-native-git-upgradeと呼ばれ、可能な限り自動的に競合を解決するためにGitをバックエンドで使用します。

使用方法​

要件：GitがPATHで使用可能である必要があります。プロジェクトはGitで管理されている必要はありません。

グローバルにreact-native-git-upgradeをインストールします

$ npm install -g react-native-git-upgrade

または、Yarnを使用します

$ yarn global add react-native-git-upgrade

次に、プロジェクトディレクトリ内で実行します

$ cd MyProject
$ react-native-git-upgrade 0.38.0

注：react-nativeの新しいバージョンをインストールするために「npm install」を実行しないでください。このツールは、正しく動作するために、古いプロジェクトテンプレートと新しいプロジェクトテンプレートを比較する必要があります。上記のように、古いバージョンでアプリフォルダ内で実行するだけです。

出力例

引数なしでreact-native-git-upgradeを実行して、最新のReact Nativeバージョンにアップグレードすることもできます。

AndroidとiOSのビルドファイルの変更を保持するように設計されているため、アップグレード後にreact-native linkを実行する必要はありません。

可能な限り非侵入的な実装になるように設計されています。これは、一時ディレクトリでオンザフライで作成されたローカルGitリポジトリに完全に基づいています。プロジェクトリポジトリには干渉しません（使用するVCSがGit、SVN、Mercurialなど、または何もないかに関係なく）。予期しないエラーが発生した場合、ソースは復元されます。

動作方法​

重要なステップは、Gitパッチを生成することです。パッチには、アプリで使用されているバージョンと新しいバージョンの間のReact Nativeテンプレートで行われたすべての変更が含まれています。

このパッチを取得するには、node_modulesディレクトリ内のreact-nativeパッケージに埋め込まれたテンプレートからアプリを生成する必要があります（これらはreact-native initコマンドが使用するのと同じテンプレートです）。次に、現在のバージョンと新しいバージョンの両方でテンプレートからネイティブアプリが生成された後、Gitはプロジェクトに適応したパッチ（アプリ名を含む）を作成できます。

[...]

diff --git a/ios/MyAwesomeApp/Info.plist b/ios/MyAwesomeApp/Info.plist
index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
        <dict>
            <key>localhost</key>
            <dict>
-               <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+               <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
[...]

必要なのは、このパッチをソースファイルに適用することだけです。古いreact-native upgradeプロセスでは、小さな違いについてプロンプトが表示されますが、Gitは3方マージアルゴリズムを使用してほとんどの変更を自動的にマージし、最終的に馴染みのある競合区切り文字を残すことができます。

    13B07F951A680F5B00A75B9A /* Release */ = {
      isa = XCBuildConfiguration;
      buildSettings = {
        ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
        CODE_SIGN_IDENTITY = "iPhone Developer";
        FRAMEWORK_SEARCH_PATHS = (
          "$(inherited)",
          "$(PROJECT_DIR)/HockeySDK.embeddedframework",
          "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
        );
=======
        CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
        HEADER_SEARCH_PATHS = (
          "$(inherited)",
          /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
          "$(SRCROOT)/../node_modules/react-native/React/**",
          "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
        );

これらの競合は一般的に簡単に処理できます。区切り文字のoursは「あなたのチーム」を表し、theirsは「React Nativeチーム」と見なすことができます。

新しいグローバルパッケージを導入する理由​

React NativeにはグローバルCLI（react-native-cliパッケージ）が付属しており、コマンドをnode_modules/react-native/local-cliディレクトリに埋め込まれたローカルCLIに委任します。

前述のように、このプロセスは現在のReact Nativeバージョンから開始する必要があります。実装をlocal-cliに埋め込んでいた場合、古いバージョンのReact Nativeを使用しているときにこの機能を利用することはできません。たとえば、この新しいアップグレードコードが0.38.0でリリースされた場合、0.29.2から0.38.0にアップグレードすることはできません。

Gitベースでのアップグレードは、開発者エクスペリエンスを大きく向上させるため、全ての人に利用可能にすることが重要です。グローバルにインストールされた別のパッケージreact-native-git-upgradeを使用することで、プロジェクトで使用しているReact Nativeのバージョンに関係なく、この新しいコードを今日から利用できます。

もう1つの理由は、Martin Konicekによる最近のYeomanの削除です。パッチを作成するために古いテンプレートを評価できるようにするため、これらのYeoman依存関係を`react-native`パッケージに戻したくありませんでした。

お試しいただき、フィードバックをお寄せください​

結論として、この機能をお楽しみいただき、改善点の提案、問題の報告、特にプルリクエストの送信を遠慮なく行ってください。各環境は少し異なり、各React Nativeプロジェクトも異なります。この機能をすべての人に最適なものにするには、皆様からのフィードバックが必要です。

ありがとうございました！​

この実現にあたり、素晴らしい企業であるZenikaとM6 Web (アーカイブ)に感謝いたします！

React Nativeでは多くの作業が行われているため、何が進行中なのかを把握するのが難しいという声を多くの方々から聞いています。進行中の作業についてお知らせするために、React Nativeのロードマップを公開するようになりました。概要としては、この作業は3つの優先事項に分類できます。

• コアライブラリ。最も便利なコンポーネントとAPIに機能を追加します。
• 安定性。バグを減らし、コードの品質を向上させるために、基盤となるインフラストラクチャを改善します。
• 開発者エクスペリエンス。React Native開発者がより迅速に作業を進められるようにします。

ロードマップに価値があると考える機能の提案がある場合は、Cannyをご覧ください。そこで、新機能を提案したり、既存の提案について話し合ったりできます。

React Nativeの新機能​

本日リリースされたReact Nativeバージョン0.37では、タッチ可能なボタンをアプリに簡単に追加できる新しいコアコンポーネントが導入されました。また、新しいYarnパッケージマネージャーのサポートも導入され、アプリの依存関係の更新プロセス全体が高速化されるはずです。

Buttonの導入​

本日、あらゆるプラットフォームで優れた外観の基本的な<Button />コンポーネントを導入します。これは、私たちが最も頻繁に受けるフィードバックの1つに対応するものです。React Nativeは、すぐに使用できるボタンが用意されていない数少ないモバイル開発ツールキットの1つです。

<Button
  onPress={onPressMe}
  title="Press Me"
  accessibilityLabel="Learn more about this Simple Button"
/>

経験豊富なReact Native開発者は、ボタンの作成方法を知っています。iOSではデフォルトの外観にTouchableOpacityを使用し、Androidではリップル効果にTouchableNativeFeedbackを使用し、いくつかのスタイルを適用します。カスタムボタンの作成やインストールは特に難しいことではありませんが、React Nativeを学ぶことを非常に容易にすることを目指しています。コアに基本的なボタンを追加することで、初心者でも初日に素晴らしいものを開発できるようになり、ボタンのフォーマットやTouchableのニュアンスの学習に時間を費やす必要がなくなります。

Buttonは、あらゆるプラットフォームで優れた動作とネイティブな外観になるように設計されているため、カスタムボタンが持つすべての機能をサポートするわけではありません。優れた出発点ですが、既存のボタンをすべて置き換えることを意図したものではありません。詳細については、実行可能な例を含む新しいButtonドキュメントをご覧ください！

Yarnを使用したreact-native initの高速化​

JavaScriptの新しいパッケージマネージャーであるYarnを使用して、react-native initを大幅に高速化できるようになりました。高速化を確認するには、yarnをインストールし、react-native-cliを1.2.0にアップグレードしてください。

$ npm install -g react-native-cli

新しいアプリの設定時に「Using yarn」が表示されるはずです。

シンプルなローカルテストでは、react-native initは良好なネットワーク環境で約1分で完了しました（npm 3.10.8を使用する場合の約3分と比較）。Yarnのインストールは任意ですが、強くお勧めします。

ありがとうございました！​

このリリースに貢献してくださった皆様に感謝申し上げます。完全なリリースノートは、GitHubで公開されています。24個以上のバグ修正と新機能により、React Nativeは皆様のおかげでますます改善されています。

本日、React Native 0.36をリリースしました。新機能の詳細については、以下をお読みください。

Headless JS​

Headless JSは、アプリがバックグラウンドにある間にJavaScriptでタスクを実行する方法です。たとえば、新しいデータの同期、プッシュ通知の処理、音楽の再生などに使用できます。現時点ではAndroidでのみ利用可能です。

開始するには、専用のファイル（例：`SomeTaskName.js`）で非同期タスクを定義します。

module.exports = async taskData => {
  // Perform your task here.
};

次に、`AppRegistry`でタスクを登録します。

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
  require('SomeTaskName'),
);

Headless JSを使用するには、必要に応じてサービスを起動できるように、ネイティブJavaコードを記述する必要があります。詳細については、新しいHeadless JSドキュメントをご覧ください！

キーボードAPI​

Keyboardを使用すると、オンスクリーンキーボードの操作が容易になります。ネイティブキーボードイベントをリッスンし、それに対応できるようになりました。たとえば、アクティブなキーボードを閉じたい場合は、Keyboard.dismiss()を呼び出すだけです。

import {Keyboard} from 'react-native';

// Hide that keyboard!
Keyboard.dismiss();

アニメーションの除算​

React Nativeでは、加算、乗算、剰余演算による2つのアニメーション値の結合が既にサポートされています。バージョン0.36では、除算による2つのアニメーション値の結合が可能になりました。アニメーション値を計算のために反転する必要がある場合があります。例として、スケールの反転（2倍→0.5倍）があります。

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
  toValue: 2,
}).start();

その後、`b`は`a`のスプリングアニメーションに従い、`1 / a`の値を生成します。

基本的な使い方は次のとおりです。

<Animated.View style={{transform: [{scale: a}]}}>
  <Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

この例では、親のスケーリングがキャンセルされるため、内部の画像はまったく伸縮しません。詳細については、アニメーションガイドをご覧ください。

ダークステータスバー​

StatusBarに新しいbarStyle値dark-contentが追加されました。これにより、AndroidとiOSの両方でbarStyleを使用できるようになりました。動作は次のようになります。

• default：プラットフォームのデフォルトを使用します（iOSではライト、Androidではダーク）。
• light-content：黒いテキストとアイコンを持つライトステータスバーを使用します。
• dark-content：白いテキストとアイコンを持つダークステータスバーを使用します。

…その他​

上記は、0.36で変更された内容のサンプルです。新機能、バグ修正、および破壊的変更の完全なリストについては、GitHubのリリースノートをご覧ください。

ターミナルで次のコマンドを実行して、0.36にアップグレードできます。

$ npm install --save react-native@0.36
$ react-native upgrade

優れた開発者エクスペリエンスを実現する上で重要な要素の1つに、優れたドキュメントがあります。優れたドキュメントの作成には多くの作業が必要になります。理想的なドキュメントは、簡潔で、役に立ち、正確で、完全で、魅力的なものです。最近、皆様からのフィードバックに基づいてドキュメントの改善に力を入れており、その一部をご紹介したいと思います。

インライン例​

新しいライブラリ、新しいプログラミング言語、または新しいフレームワークを学ぶとき、コードを少し書いて、試してみて、それが機能するかどうかを確認する…そして実際に機能するという素晴らしい瞬間があります。あなたは現実の何かを作り出したのです。私たちは、その臨場感あふれる体験をドキュメントに直接取り入れたいと考えました。このような感じです。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class ScratchPad extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>
          Isn't this cool?
        </Text>
        <Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>
          👍
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('ScratchPad', () => ScratchPad);

私たちは、Devin Abbottの協力を得てreact-native-web-playerモジュールを使用したこれらのインライン例は、React Nativeの基本を学ぶための優れた方法だと考えており、新しいReact Native開発者向けのチュートリアルを可能な限りこれらを使用するように更新しました。確認してください。サンプルコードのほんの一部を変更するとどうなるのかを知りたいと思ったことがあるなら、これは非常に優れた方法です。また、開発者ツールを構築していて、独自のサイトにライブのReact Nativeサンプルを表示したい場合は、react-native-web-playerを使用すると簡単に実現できます。

コアシミュレーションエンジンは、Nicolas Gallagherのreact-native-webプロジェクトによって提供されており、WebでTextやViewなどのReact Nativeコンポーネントを表示する方法を提供します。コードベースの大部分を共有するモバイルとWebのエクスペリエンスを構築することに関心がある場合は、react-native-webをご覧ください。

ガイドの改善​

React Nativeの一部の領域では、複数の方法で作業を行うことができ、より適切なガイダンスを提供できるというフィードバックを受けています。

さまざまなアプローチを比較し、使用するものを推奨する新しいナビゲーションガイドがあります。短期的には、これらのインターフェースの改善と統合に取り組んでいます。短期的には、より良いガイドによって皆様の生活が楽になることを願っています。

また、ボタンのようなインターフェースを作成するための基本を説明し、タッチイベントを処理するさまざまな方法の概要を簡単に説明した新しいタッチ処理ガイドもあります。

もう1つの取り組みとして、Flexbox の改善に取り組みました。これには、Flexbox を使用したレイアウトの処理方法とコンポーネントのサイズ制御方法に関するチュートリアルが含まれています。また、魅力的ではないかもしれませんが、役立つであろうReact Native のレイアウトを制御するすべてのプロパティの一覧も含まれています。

はじめに​

React Native の開発環境をマシンにセットアップする際には、多くのインストールと設定を行う必要があります。インストールを本当に楽しくエキサイティングな体験にするのは難しいですが、少なくともできるだけ迅速かつスムーズに行えるようにすることができます。

開発オペレーティングシステムとモバイルオペレーティングシステムを事前に選択できる新しい「はじめに」ワークフローを構築しました。これにより、すべてのセットアップ手順が1か所に簡潔にまとめられます。また、インストールプロセス全体を検証して、すべてが機能し、すべての分岐点に明確な推奨事項があることを確認しました。 社内の関係者にもテストしてもらった結果、これは改善だと確信しています。

また、React Native を既存のアプリに統合するためのガイドにも取り組みました。Facebook アプリ自体など、React Native を使用している大規模アプリの多くは、アプリの一部を React Native で、残りを通常の開発ツールを使用して構築しています。このガイドにより、より多くの人がこの方法でアプリを構築できるようになることを願っています。

皆様のご協力が必要です​

皆様からのフィードバックは、私たちが何を優先すべきかを教えてくれます。「ドキュメントの改善？そんなもの。X のドキュメントはまだゴミだ！」と考える方もいるでしょう。それは素晴らしいことです。私たちはそうした意見を必要としています。フィードバックの方法としては、フィードバックの種類によって最適な方法が異なります。

ドキュメントに不正確な説明や実際に動作しないコードなど、間違いを発見した場合は、問題を報告してください。「Documentation」タグを付けてください。そうすることで、担当者へのルーティングが容易になります。

特定の間違いではなく、ドキュメントの内容が根本的に分かりにくい場合は、GitHub の問題報告には適していません。代わりに、改善が必要なドキュメントの箇所についてCannyに投稿してください。これにより、ガイド作成などのより一般的な作業を行う際の優先順位付けに役立ちます。

最後まで読んでいただきありがとうございます。そして、React Native をご利用いただきありがとうございます！

React Native のオープンソース化から1年が経ちました。少数のエンジニアによるアイデアから始まったものが、今では Facebook 社内外のプロダクトチームで使用されているフレームワークとなりました。本日の F8 で、Microsoft がReact Native を Windows エコシステムに導入することを発表しました。これにより、開発者は Windows PC、Phone、Xbox で React Native を使用したアプリを開発できる可能性があります。また、Visual Studio Code 用の React Native 拡張機能や CodePush などのオープンソースツールやサービスを提供し、開発者が Windows プラットフォームで React Native アプリを作成するのを支援します。さらに、Samsung は、ハイブリッドプラットフォーム向けに React Native を構築しており、開発者は数百万台のスマートテレビ、モバイルデバイス、ウェアラブルデバイス向けアプリを開発できます。また、React Native 用 Facebook SDKもリリースしました。これにより、開発者はログイン、共有、アプリ分析、Graph API などの Facebook のソーシャル機能をアプリに簡単に統合できます。1年で、React Native は主要なプラットフォームすべての開発方法を変えました。

壮大な道のりでしたが、これはほんの始まりです。オープンソース化から1年経った React Native の成長と進化、その過程で直面した課題、そして今後の展望について振り返ってみましょう。

これは抜粋です。全文はFacebook Codeでお読みください。

今年初め、iOS 向け React Nativeを発表しました。React Native は、ウェブの React で開発者が慣れ親しんでいる宣言型の独立した UI コンポーネントと迅速な開発サイクルをモバイルプラットフォームにもたらし、ネイティブアプリケーションの速度、忠実度、そして感覚を維持します。本日、Android 向け React Native をリリースできることを嬉しく思います。

Facebook では、1年以上前から本番環境で React Native を使用しています。ほぼ1年前、私たちのチームは広告マネージャーアプリの開発に着手しました。私たちの目標は、Facebook で広告を出稿している数百万の人々が、外出先でアカウントを管理し、新しい広告を作成できる新しいアプリを作成することでした。これは、Facebook の最初の完全な React Native アプリであるだけでなく、最初のクロスプラットフォームアプリにもなりました。この記事では、このアプリの構築方法、React Native によってどのように開発速度を向上できたか、そして学んだ教訓を共有したいと思います。

これは抜粋です。全文はFacebook Codeでお読みください。