Expoで素のReact Componentを表示する（スタンドアロン/ローカルHTML編）
前回は、使いたいコンポーネントがReactNativeじゃない素のReact Componentだったので、ガラネイティブ方式（WebViewでWebアプリにアクセスする）で、無理やりExpo製のNativeアプリに素のReact Componentを表示させた。
しかしアプリを動かすには同時にWEBアプリの起動も必要なため、ひじょーに取り回しが悪く、
「・・・こんなの・・・手軽に使えないじゃないかぁ・・・！！こんなことを続けていても・・・未来はない。・・・そうだ、悪い夢だったんだ・・・」
と正気に返って、健全なアウトライナーを作るため、DragAndDrop系のReact Native Componentを調べ始めたところでした。
囁き
そんな失意も混じった日々の中、「react native contenteditable」で検索しておりますと、こんな記事が目に入ってきました。
「・・・この人も同じ道を・・・」と、眺めておりますと、
！Σ（￣□￣;）ナ、ナント・・・
「頑張ってhtmlファイルを作る」
そ、そうか・・・Webサーバから流すコンテンツをassetにぶち込めばいいんだ・・・
たしかにロードを要求しないタイプのSPAであれば一つのローカルHTMLファイルに詰め込んで、アクセス可能なところに配置してWebViewで参照すればOKのはず・・・
「夢よ再び」・・・と自分で自分に囁いておりました。
試してみる
Webアプリを起動してHTMLを取得する
-
上記で作ったWebアプリを起動し、ブラウザでアクセスする。
-
ブラウザのインスペクタを開き、Reactによって動的に生成されたHTMLタグのouterHTMLをまるっとクリップボードにコピーする
-
プロジェクトの「./web」フォルダの直下にindex2.html ファイルを作成し、先ほどのouterHTMLの内容を張り付ける
-
index2.html の中で参照しているScriptやリソースをダウンロードして、「./web」フォルダ直下に配置する。
-
index2.html の中で参照しているWebサーバにあるScriptやリソースのパスを直下を見るように書き換える
上記サンプルでいうとこんな感じに修正する
- <script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script>
+ <script src="./bundle.js"></script><script src="./0.chunk.js"></script><script src="./main.chunk.js"></script>
WEBサーバを見ないようWebViewの参照先をHTMLに修正
App.txsのWebViewのuriを"index2.html"に修正
<WebView
style={styles.container}
originWhitelist={['*']}
source={{ uri: "index2.html" }}
/>
動かしてみる
Webサーバを停止させ、Expoでアプリケーションを動かす。
AndroidでローカルHTMLファイルにアクセスして素のReactコンポーネントをスタンドアロンで動かす
おおおおお！！ Webアプリなし でもスタンドアロンで動いた・・・
ちゃんとグリグリ動く・・・
単純なSPAであれば、こういう方法もありかなと思いました。みんな！ いい夢見ろよ!!(๑º ﾛ º๑)!!
Discussion