React Native Canvas介紹及修正在Android 12上的滾動效果

React Native Canvas介紹

如果你想在React Native上製在一個用手指在螢幕上繪圖的功能，那麼React Native Canvas會很適合你。

React Native Canvas 是一個很有趣的library，它可以讓你在React Native上使用類似HTML 5 Canvas的API。

那麼它是如何做到的？很簡單，就是直接使用WebView，然後寫一套API去把指令從React Native傳過去WebView。

在WebView那裡就是直接調用HTML 5的Canvas API了。

來看一下它的原始碼：

這個原始碼是我從Canvas.js裡抽出來的，可以看到其實就是一個WebView。而WebView component和React Native之間就是利用onMessage和webview.postMessage來進行溝通的。

這是一種很常用的WebView交換資料方式，詳細可以到react-native-webview的API文檔去查看。

onMessage (Prop):

postMessage (Function):

Library的其它檔案連接了各種Canvas API的interface，一般用到的都會有。

我自己是用來製作簡單的手指繪圖功能，效能還算不錯，如果我不說的話，基本上沒有人會知道這個繪圖功能是一個WebView做出來的。

當然，這就是得益於現在的手機越來越快，WebView效能越來越好，我現在連PDF都是用PDF.js來顯示的。回想很多年前，我也曾試在手機上使用PDF.js，但實在太慢。

以後有機會說說在React Native上用PDF.js。

話說回來，只要你會用HTML 5的Canvas API，你就會用React Native Canvas這個library。

所以用這個來做繪圖功能就很方便，全部使用JavaScript即可，不用麻煩去寫Native Module。

我在不同手機，Android和iOS上都沒有遇到問題，後來到了Android 12，我發現用手指繪圖時，會有一個我不想要的滾動效果。

這是因為Android 12開始新增的視覺效果:

Starting in Android 12 (API level 31), the visual elements stretch and bounce back on a drag event, and fling and bounce back on a fling event.

可能Google覺得這效果很好看吧，老實說我覺得一般。

好了，那怎樣去解決呢，用手指在螢幕上繪圖時，是不應該觸發滾動的，很簡單，在WebView上加上一句overScrollMode="never"即可。

上面的原始碼已經有這句了，這是因為這句是我加上去的，原本是沒有，我特地send了一個pull request去解決它。

Commit在此:

很簡單的一句，但有時候就是沒有人去做啊！

所以如果我們有能力，就多對open source library做些貢獻吧！

這個Commit到今天為止還沒有新的版本推出，所以想用的話請直接用Main Branch。

除了React Native Canvas，還在什麼方法可以製作手指繪圖這個功能呢，答案就是React Native Skia了，而且因為不是用WebView，效能會更好！

但相容性應該會較差，因為它使用了較底層的C++去寫。我們知道，越上層的abstraction相容性必定會越好。所以如果你真的要用，記住要在多些裝置上作測試。

我自己是還沒有用過，有興趣的可以試試:

白熊之吾寫筆記