web-dev-qa-db-ja.com

React Nativeの "canvas"と同等

私は現在、React-Nativeに基づく画像処理モバイルアプリに取り組んでいます。ただし、React-Native公式サイトには、画像の切り取り、ズーム、パン、および保存機能（HTML5キャンバス要素で簡単に実現可能）に関する関連ドキュメントが見つかりません。

私もいくつかのグーグル検索を行いますが、「メンテナンスされていない」react-native-canvas（ https://github.com/lwansbrough/react-native-canvas ）のみを見つけます。 React Native？に「キャンバス」に相当するものはありますか？

canvasreact-native
25
user6318446

react-native-canvasメンテナはこちら。この質問が尋ねられて以来、ライブラリで多くの変更が行われました：Path2Dやグラデーションなどの高度な機能を備え、デフォルトのWebとは異なり、React高DPIでレンダリングするキャンバスを表示します。

コンポーネントは、他のReactネイティブコンポーネントと比較して低速です。これは、舞台裏でWebViewを使用してレンダリングするためです。ただし、コンポーネントとの通信は、 React Nativeはネイティブビューをレンダリングします。トレードオフは、ライブラリがネイティブインストールを必要とせず、React Native JavaScriptランタイムとnative WebView

キャンバスをReact Native JavaScriptランタイムでレンダリングするというアイデアがありましたが、JavaScriptランタイムで機能を完全なno-DOMキャンバスにした人はいないため、かなりの労力がかかります実装する。

K Healthでの経験から、レスポンシブユーザーインタラクションには十分な速度でグラフィックをレンダリングできますが、完全なアニメーションには十分ではありません。このコンポーネントは、数千人のユーザーがいるアプリで使用されています。

私を含むreact-native-canvasの貢献者とユーザーはとても喜んで助けてくれます。質問があれば、気軽に問題を開いたり、メールを送ってください。

11
Iddan Aaronsohn

さて、2年後、あなたのための新しい選択肢があります：

https://alibaba.github.io/GCanvas/

この「GCanvas」は、canvas2dおよびWebGL APIを実行するネイティブ環境向けに設計されています。

見る

https://alibaba.github.io/GCanvas/docs/Integrate%20GCanvas%20on%20ReactNative.html

7
Shaofei Cheng

「類似」しているがまったく同じではないオプションがいくつかあります。私の提案は...

  • React Native SVG -私たちがよく知っているSVG Webコンポーネントによく似ています。このライブラリを使用して、アニメーションでも多くのことができます。

  • [〜＃〜] art [〜＃〜] （Reactネイティブバージョン ここにあります ）-「React Native」バージョンのReact ARTライブラリ、これはライブラリARTの拡張です ここにあります .. React Native but Iデフォルトのセットアップにまだ統合されているとは思わないので、node_modulesフォルダーにあり、XCodeにインポートする必要があります（議論は ここにあります です。通常、node_modulesからプロジェクトファイルをドラッグします。それが置かれているフォルダー（node_modules/react-native/Libraries/ART/Art.xcodeproj）React Native XCodeプロジェクトナビゲーター。リソースをコピーするように求められたら、[はい]をクリックします。その後、プロジェクト設定ファイル->一般->リンクされたフレームワークとライブラリーに移動します。次に、プラスアイコンを押して、ARTを検索し、依存関係として追加します。

注：過去数か月間に公式の「Getting Started」ガイドに従って反応ネイティブで始めたばかりの場合、デフォルトのガイドは「expo 「。そして React Native SVG はデフォルトでexpoビルドに含まれています。そのため、それを使用することは非常に簡単です。

4
GoreDefex