📘

Expoで素のReact Componentを表示する(スタンドアロン/ローカルHTML編)

2022/07/20に公開

前回は、使いたいコンポーネントがReactNativeじゃない素のReact Componentだったので、ガラネイティブ方式(WebViewでWebアプリにアクセスする)で、無理やりExpo製のNativeアプリに素のReact Componentを表示させた。

https://zenn.dev/waterz1815/articles/8f6497757e87d0

しかしアプリを動かすには同時にWEBアプリの起動も必要なため、ひじょーに取り回しが悪く、

「・・・こんなの・・・手軽に使えないじゃないかぁ・・・!!こんなことを続けていても・・・未来はない。・・・そうだ、悪い夢だったんだ・・・」

と正気に返って、健全なアウトライナーを作るため、DragAndDrop系のReact Native Componentを調べ始めたところでした。

囁き

そんな失意も混じった日々の中、「react native contenteditable」で検索しておりますと、こんな記事が目に入ってきました。

https://wawoon.dev/posts/react-native-any-component

「・・・この人も同じ道を・・・」と、眺めておりますと、

!Σ( ̄□ ̄;)ナ、ナント・・・

「頑張ってhtmlファイルを作る」

そ、そうか・・・Webサーバから流すコンテンツをassetにぶち込めばいいんだ・・・

たしかにロードを要求しないタイプのSPAであれば一つのローカルHTMLファイルに詰め込んで、アクセス可能なところに配置してWebViewで参照すればOKのはず・・・

「夢よ再び」・・・と自分で自分に囁いておりました。

試してみる

Webアプリを起動してHTMLを取得する

https://zenn.dev/waterz1815/articles/8f6497757e87d0#webアプリの作成

  1. 上記で作ったWebアプリを起動し、ブラウザでアクセスする。

  2. ブラウザのインスペクタを開き、Reactによって動的に生成されたHTMLタグのouterHTMLをまるっとクリップボードにコピーする

  3. プロジェクトの「./web」フォルダの直下にindex2.html ファイルを作成し、先ほどのouterHTMLの内容を張り付ける

  4. index2.html の中で参照しているScriptやリソースをダウンロードして、「./web」フォルダ直下に配置する。

  5. index2.html の中で参照しているWebサーバにあるScriptやリソースのパスを直下を見るように書き換える

上記サンプルでいうとこんな感じに修正する

index2.html
- <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"に修正

App.txs
<WebView
style={styles.container}
originWhitelist={['*']}
source={{ uri: "index2.html" }}
/>

動かしてみる

Webサーバを停止させ、Expoでアプリケーションを動かす。


AndroidでローカルHTMLファイルにアクセスして素のReactコンポーネントをスタンドアロンで動かす

おおおおお!! Webアプリなし でもスタンドアロンで動いた・・・
ちゃんとグリグリ動く・・・

単純なSPAであれば、こういう方法もありかなと思いました。みんな! いい夢見ろよ!!(๑º ロ º๑)!!

Discussion

ログインするとコメントできます