React Nativeアプリを作っているときにiOSのWebViewのスクロール速度が遅いことに気がついた。
指でフリックしても全然滑らない。
同じサイトをSafariで表示させて比べてみても、スクロール量が全然違う。
UIWebviewの設定値の問題だった
解決策を検索していてたどり着いた記事がこちら。
WebView内のscrollViewのデフォルトの設定値が原因らしく、プロパティの変更で対応できるとのこと。
以下のようにするだけでスクロールの滑りがUITableViewのデフォルトと同等になります。
self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal
react-native-webviewで適用するには?
なるほど、ネイティブコードでの修正方法は分かった。ではreact-native-webviewではどうしたら良いのか?
と思ったら普通にdecelerationRateというプロパティがあった。
結論としては、以下のようにdeclerationRateのプロパティを設定することでWebViewのスクロール速度をSafariと同等にすることができた。
<WebView
source={{uri, headers}}
decelerationRate="normal"
/>
おわりに
この件について検索しても情報があまりヒットせず、解決するまでに時間がかかってしまった。
知っている人にとっては当たり前のことだからなのか、それとも需要があまりないのか・・・
React Native開発初心者の方や、アプリ開発初心者でWebViewの扱いに困っている人の参考になれば幸いです。