web-dev-qa-db-ja.com

React Nativeで署名キャプチャを行うにはどうすればよいですか?

React Nativeで署名キャプチャを実行する方法を理解しようとしています。私のアプリはcreate-react-native-appExpoで作成されていますが、したくないのですがこの機能を動作させるには、アプリをイジェクトする必要があります。

このようなものをWebビューでラップすることは可能でしょうか? https://github.com/szimek/signature_pad

このプロジェクトも見てきました https://github.com/RepairShopr/react-native-signature-capture しかし、アプリを取り出してreact-native linkを使用する必要があります。

プロジェクトをできるだけ単純に保ちながら、この機能を実装する方法に関するアドバイスや提案を探しています(理想的には、create-react-native-appを使用しますが、これが不可能な場合は、誰かが理由を説明してください)。

5
blueether

しばらく経ちましたが、ここに興味深い記事があります: https://blog.expo.io/drawing-signatures-with-expo-25d1629ca1ac

待って、でもどうやって?

「expo-pixi」を使用すると、ブラシの色、太さ、不透明度を選択できるコンポーネントを追加できます。次に、ユーザーが指を離すと、コールバックが届きます。そこから、透明なビューのスクリーンショットを撮るか、それが探しているものであれば生のポイントデータを取得できます。

1
Tim

React Nativeが機能する方法は、React Nativeで使用可能な各コンポーネントが、基盤となるプラットフォームのネイティブコンポーネントにマップされることです。

すなわち。 <Image />はAndroidのImageViewであり、iOSのUIImageView.hです。

Javascriptコード自体は各プラットフォームのJavascriptスレッドで実行され、コンポーネントをReact Nativeで使用すると、JSからReact)に情報を渡す変換レイヤーがあります。 =対応するネイティブコンポーネントが作成されるネイティブブリッジ。

デフォルトでは、React Nativeには次のコンポーネントが含まれています: https://facebook.github.io/react-native/docs/components-and-apis.html#basic- components これは、これらのコンポーネントのみがReact Nativeですぐに使用できることを意味します。他のコンポーネントが必要な場合は、2つのオプションがあり、「複合」コンポーネントを作成します。 JSコンポーネントが他のJSコンポーネントに書き込まれるか、機能にReact Native)によってまだ公開されていないネイティブコンポーネントが必要な場合は、独自の「ネイティブ」コンポーネントを作成して、特定のネイティブ機能を公開します。 Reactネイティブコード。

Expoの仕組みは、Reactネイティブと少数のサードパーティコンポーネントをラップして、アプリケーション内に構築したことです。サードパーティネイティブコンポーネントを使用できない理由は、サポートは、そのコンポーネントが使用されている場合、アプリ自体にJSからネイティブのAndroid/iOSビューに移動するための変換コードがないためです。

したがって、あなたが求めていることを行うには、Expoがプラットフォーム/アプリに含めている「ネイティブ」描画コンポーネントを見つける必要があります。 OR他のデフォルトで構築された「複合」描画コンポーネントを見つける必要がありますReactネイティブコンポーネント(またはExpoがサポートする他のコンポーネント)。

すなわち。 Androidでは、Canvasビューを使用してこれを作成する場合がありますが、React Nativeはそのオブジェクトをネイティブにサポートしていないため、おそらく自分で作成するなどです。

React Nativeはオープンソースであり、反復が非常に速いため、コミュニティで構築されたほとんどのコンポーネントが常に最新であるとは限らないため、Expoがサードパーティの「ネイティブ」コンポーネントをすべてサポートすることは困難です。互いに競合する可能性があります。

3
ACVM

私はreact-native-signature-captureを使用しています。 AndroidとiOSの両方で正しく動作します。

enter image description here

2
KAUSHIK PARMAR