react-native-image-modalを使ってイメージを全体画面で表示して、pinch拡大、縮小などをしてみましょう。共有AppsContactreact-native-image-modal2020-01-31react-native-image-modalを使ってイメージを全体画面で表示して、pinch拡大、縮小などをしてみましょう。概要イメージを選択したら全体画面で表示して拡大、縮小する機能があるコンポーネントが必要になりました。検索すると上手く作ったコンポーネントがあると思いますが、今回は時間を掛ってreact-native-image-modalと言うコンポーネントを作ってみました。このブログポストでは私が作ったreact-native-image-modalを使う方法についてみてみます。react-native-image-modalプレビューまず、今回使うreact-native-image-modalは下記のように動作します。インストール下記のコマンドでreact-native-image-modalをインストールします。下記のようにイメージを全体サイズで表示したいコンポーネント中へreact-native-image-modalをインポートします。'react-native-image-modal';下記のようにイメージモーダルを追加して使います。NativeのImageコンポーネントのPropsをそのまま使えます。このPropsは初めて画面へ表示される原本のイメージへ適用されます。(全体サイズモーダルのイメージには適用されません。)下記にある内容はreact-native-image-modalへ専用のPropsです。スワイプして画面を閉じます。原本イメージのバックグラウンドの色。全体画面サイズのモーダルのバックグラウンドの色。原本のイメージを長押した時呼び出せるコールバック関数。全画面サイズモーダルのヘッダーの部分をカスタマイズする時使います。全画面サイズモーダルのフッターをカスタマイズする時使います。全画面サイズモーダルのイメージを一回タップする時呼び出せるコールバック関数。全画面サイズモーダルのイメージを二回タップする時呼び出せるコールバック関数。全画面サイズモーダルのイメージを長押す時呼び出せるコールバック関数。全画面サイズモーダルが閉じる時のコールバック機能react-native-image-modalは甲斐のような機能を持っています。イメージモダールを開く/閉じるイメージをpinchで拡大、縮小、移動イメージをダブルタップで拡大、縮小スワイプでモーダルを閉じる例題プロジェクトGithubリポジトリへ例題プロジェクトも含まれています。react-native-image-modal例題ソースを確認するため下記のようにGithubリポジトリをクロンします。https://github.com/dev-yakuza/react-native-image-modal.git例題プロジェクトへ必要なライブラリをインストールします。install下記のコマンドを使って例題プロジェクトを実行します。androidContribute初めて作ったopensourceなので、完璧ではないと思います。バグや機能を追加したい方がいるならプルリ投げてください。楽にContributeできるように、このプロジェクトを開発する方法について共有します。プロジェクトをクロンします。https://github.com/dev-yakuza/react-native-image-modal.git下記のコマンドで開発環境を構築してタイプスクリプトを実行します。start下記のコマンドで開発用のプロジェクトを実行します。ios完了これで私が初めて作ったOpensource、react-native-image-modalを使う方法についてみてみました。たくさんの方へ役に立てほしいです。