以前の記事では、React Native for Web (RN Web)とは何ぞや、という紹介をしました。
React Native for WebでHello world
今回は次の一歩として、RN Webで具体的にコンポーネントを書き始めるための基礎を紹介します。
基本は公式のStorybook。が、
RN Web公式のStorybookがあり、ここにRN Webでの原子的な材料となるコンポーネントが載っています。View、Text、Imageなど。
これらを組み合わせて、自作のコンポーネントを書いていくのが基本となります。
・・・なのですが、実は、RNに標準で用意されている全コンポーネントがRN Webに移植されているわけではないんです。
RNのドキュメントをRN WebのStorybookと見比べると分かりますが、RNにはあってRN Webにないものがちょこちょこあります。
そうしたRNにしかないコンポーネントを使っていた場合、RN Webにおいては適当な仮実装（ただのViewなど）に置き換えられます。ちゃんと移植はされていないものの、エラーが起こったりはせずに一応は動くようになっています。
必要に応じてWeb固有部分を書く
そうした事情もあり、iOS/Android/Webのプラットフォーム3本立てのアプリを作るには、現実的にはプラットフォームに応じて多少の分岐が必要になるでしょう。
分岐の作り方はRNがもともと備えている仕組みと同じ要領であり、以下の2通りがあります（RN Web公式の説明はこちら）。
- ファイル内での小さな分岐:
Platformモジュールを使う。 - ファイル単位の分岐: RNにおいて拡張子を
.ios.js、.android.jsとするのと同じ要領で、.web.jsとする。
一つ目のPlatformは簡単です。Platform.OSの値が、iOSならios、Androidならandroidになるところが、RN Webだとwebになります。
この値を参照して、ちょっとした分岐を書けるでしょう。
二つ目のファイル単位の分岐を利用するには、まずWebpackの設定に少し書き足す必要があります。以下の通りです。
module.exports = {
// 前略（entry, output, moduleなど）
resolve: {
extensions: [ '.web.js', '.js' ] // .web.js がポイント
}
}
この様にした上で、あるコンポーネントMyComponent.jsに関し、iOS/Android用とは異なる実装としたWeb用のMyComponent.web.jsを別途用意したとします。
MyComponentを使いたいコンポーネントでは、以下の様にimportします。
import MyComponent from './MyComponent'
こうすると、iOS/AndroidではMyComponent.jsの内容が使われ、RN WebではMyComponent.web.jsの内容が使われます。
ルーティングはどうするか
本格的なアプリを作るには、たいてい何らかのルーティングが必要になってきます。
代表的なルーティングライブラリの一つであるReact Routerは、Web用（本家本元のReact用）のreact-router-domと、RN用のreact-router-nativeの両方が用意されていて、概ね共通のAPIが提供されています。なんとなくRNとRN Webの関係に似ていますね。
試してみたところ、RN WebではこのReact Routerが使えました（他にも使えるルーティングライブラリはありそうですが、調べられていません）。
では、RN Webではどっち用のReact Routerを使うの？という話になりますが、Web用（react-router-dom）を使ってみたところ、無事動きました。
RN Webはブラウザ上で動かすものですから、基本的にはReact用のライブラリが使えるということでしょうか。
というわけで、RNではreact-router-nativeを、RN Webではreact-router-domをimportして使いたいので、先ほど紹介したプラットフォーム毎に分岐させるパターンをさっそく利用して、2種類のReact Routerを使い分けることになるでしょう。
RN用のコンポーネントライブラリは使えるか
巷にある、RN用のおしゃれコンポーネントライブラリって色々ありますよね。
これらのライブラリがRN Webでも使えるかどうかは、そのライブラリが何に依存しているかによります。
iOSやAndroidのネイティブの部分に依存しているライブラリは、RN Webでは使えないと思ってよいでしょう。
一方、RN標準のコンポーネントの組み合わせで実現しているライブラリならば、RN Webでも使えます・・・多分。
多分の理由は、先述の通り、RN標準のコンポーネント全てがRN Webに移植されているわけではないからです。