【全てのアプリ開発者に贈る】React Native いろいろ触ってみた【目次】

ローラハウスでは、iPhone登場以降、たくさんのスマートフォンアプリ開発を行なってきました。SwiftもKotlinも大好きです。そんな我々が、気になっているのが、React Native。本当に日々の開発に使えるのか色々触ってみることにしました。感触としては痒いところに手が届かない感じはありますが、使えるかもしれないなと感じています。これまでさんざん裏切られてきたマルチプラットフォーム環境から考えると、かなりいい感じです。最近は、Flutterとかもあるけど、エコシステムが出来て来ている React Native に魅力を感じます。

調査に当たって、日本語の情報が系統的にまとめられているものが、ほとんど存在しない、あっても情報が古かったりという事があったので、記事を書いて公開することにしました。また記事を書くに当たって、次のことを意識しました。

• 記事は出来るだけシンプルに一つのことについて説明するように。
• GIFアニメーションでどんな事が出来るのか一目でわかるように。
• サンプルコードを用意してGithubに公開。メンテナンス可能に。

価値ある情報として蓄積していきたいので、記事とサンプルコードは最新の環境で有効な情報であるようにメンテナンスしていきたいと思いますし、この目次記事には今後も記事を追加していきます。また、記事の編集リクエスト、サンプルコードのプルリクエストもお待ちしています。

ネイティブアプリ開発の皆さんも、また、Javascriptな皆さんにも、役立つ記事であることを願っています。

お願い

各記事はメンテナンスされて、削除されたり、新たに書き直されたりする事もあると予想しています。ストックされる場合は本記事に対して行なってくれると混乱が防げると思います。

環境

【React Native】 開発環境の構築とアプリ作成最初の一歩

なにはともあれ、環境構築して、React Nativeの世界に触れてみましょう。
https://qiita.com/keneo/items/aaa5946bfa4d10353302

【React Native】 Expoを使えば審査なしにアプリ更新出来てウハウハなのか？

React Nativeを採用するなら、Expo も使いたい気分ですよね。実際のところどうなんでしょうか。
https://qiita.com/keneo/items/625c7623d0dfb0cf0c6c

ユーザーインターフェース

【React Native】NativeBase導入

React Native の標準のUIは若干垢抜けない感じです。ネイティブアプリっぽいものが作りたいなら、「NativeBase」がお勧めです！
https://qiita.com/keneo/items/d3a36d973c0b89829aa9

【React Native】NativeBaseのテーマを設定してみる

NativeBase には統合的に配色を管理する仕組みが用意されています。プラットフォーム（iOS, Android）固有の配色や、マテリアルデザインもこれでOK!
https://qiita.com/keneo/items/a03d8f28ceb584bc3ff6

【React Native】React Navigation を使ってみる（画面遷移編）

画面遷移を行うためのライブラリの一つである「React Navigation」の紹介です。
https://qiita.com/keneo/items/b62ddcab0e35ce792b67

【React Native】React Navigation を使ってみる（タブバー編）

React Navigation ではタブバーの表示も可能です。
https://qiita.com/keneo/items/647d53d293470ae2b7f6

【React Native】NativeBaseのListを使ってみる

アプリ開発で一番使うといっても過言ではないのはリスト表示。ここでは、NativeBase のネイティブアプリライクなリストと、セルの再利用などについて記述しています。
https://qiita.com/keneo/items/8f47e0c6a2d8e3cb1c10

【React Native】Image picker を使ってみる

カメラロールと、カメラ撮影の簡単な画像選択ができる「Image picker」を使ってみましょう。
https://qiita.com/keneo/items/cb853bcfd85b282e6cf6

アーキテクチャー

【React Native】React Redux って覚えるの面倒だけど使うしかないよね

Reactと同時に語られることの多いRedux。ReactNativeでも必要となってきます。用語とか難しいけど、実は大したことではないんです。
https://qiita.com/keneo/items/514ffc98102d95162f00

【React Native】React Redux で通信処理をViewから独立させよう

私の場合、通信処理をどこに書いたら良いか、最初全然わかりませんでした。Reduxを導入すると、Viewから分割できてスッキリとかけます。
https://qiita.com/keneo/items/fa31ac15cda215926392

【React Native】Realmでローカルデータベース

Webアプリと違って、ネイティブアプリはローカルデータベースが必要な事多いですよね。定番のRealmを使ってみましょう。
https://qiita.com/keneo/items/2460fa20c2dbbb61bac1