EXPO NATIVE REACTのWebViewデバッグ

うんとですね。開発やってるんですよ。

遊んでいてばっかりと見られてるかもしれませんが。
で、今回は偶には技術の話。

WebViewを使ったスマホアプリの開発しているんですけど、Nativeアプリ側からWebViewへデータの受け渡しをする必要があったんですよね。
んでんで、よく見る記事としては、
injectすればJSコードが送れるでぇ
的な事が書いてあるんですよね。

で、実際送れてはいそうなんだけど、イマイチ動きがおかしい。
でも、WebViewだから受けて側のWeb内でどんな動きをするかよくわからん。
こんな状態に陥りました。

通常のAndroidのアプリでWebViewやってれば、普通にChromeのインスペクトとか使えばいけちゃうものっぽいんですが、EXPOでそれやろうと思うと出来なーい。
どうも、色々調べているとデフォルトのWebViewデバッグが禁じられているようです。
この辺りのStackOverFlowから苦しみの声が聞こえてくるようです。

Debugging WebView in React Native apps

I have a React Native App that uses WebView to render an HTML page from the assets. The page has some javascript that does some processing. The problem is that ...

おおお、そりゃ、setメソッド使わなかったら無理だろうよなぁ。

ということで、一旦EXPOでのデバッグは諦めます。
そんで、EXPOのコードで必要な部分をREACT NATIVEで実装、その後、EXPOへ逆輸入という方法をとります。
（残念ながらEJECTはうまく動かなかった。）
適当にreact-nativeコマンドで移植かけます。
出来上がった環境の
【プロジェクト名】/android/app/src/main/java/com/【プロジェクト】
にある、MainActivity.Java内で、WebViewの設定をいぢるので、
import android.webkit.WebView;
でモジュールインポート
onCreateの中で、デバッグ有効にするおまじない
WebView.setWebContentsDebuggingEnabled(true);

こんな感じでデバッガー通るようになりました。
ちなみに、Chromeのインスペクトは、この辺りを参考にしてます。