React Native+OpenGLペイント

gl-reactをReact Nativeで使う方法の覚書。

前回(設定やフィルタ処理)の続きのような感じ。

 

使ってみたいのはこちら。

https://gl-react-cookbook.surge.sh/paint

GLによるペイントプログラムです。

続きを読む React Native+OpenGLペイント

React Native+OpenGLで画像処理

gl-reactを使ってReactで画像処理してみます。

このプラグインはReact、React Native(Bare)、React Native(Expo)、Headlessで利用できるようです。

今回はExpo Managedの環境で使っていきますがメインの内容はGLSL(OpenGL Shading Language)なので大きな違いはないと思います。

パッケージ内でexpo-glを使っているようなのでついでに少し読んでおく。

expo 35.0.0 gl-react v3

続きを読む React Native+OpenGLで画像処理

React Nativeでモーダル表示

一時的な情報表示のためモーダル(ポップアップウィンドウ)を使いたい。

React Nativeの基本コンポーネントにModalがありますが、カスタムコンポーネントを使った方が楽できそうでもあったのでとりあえず3パターン試してみます。

React Native 0.60 Expo 34.0.1

続きを読む React Nativeでモーダル表示

React Nativeで複数画面の共通変数管理

ReactNativeで複数画面間の共通変数を扱うことを考える。

共通の定数ならグローバルで用意して読み込めばいいけど変数は少し厄介だった。

複数画面の管理はReact Navigation、設定保存などにはAsyncStorageを使う。

React Native 0.60 Expo v34 react-navigation 3.12.0

続きを読む React Nativeで複数画面の共通変数管理

React Native, Expoでスクリーンショットを撮る

スクリーンショット、特に部分スクショをとりたい。

Expo Managedプロジェクトで特定のViewを画像として保存する方法を探します。

スナップショットという単語が思いつかなかったので少し見つけにくかった。

React Native 0.60 Expo v34

続きを読む React Native, Expoでスクリーンショットを撮る

React Native, Expoでチャート表示を試行錯誤

React Native(Expo Managed)でグラフを表示したかった時に色々やったメモ書き。

大半はWebViewで苦戦する内容です。

React Native 0.60 Expo v34

続きを読む React Native, Expoでチャート表示を試行錯誤

React Native, Expoでアイコンを使う

Expo Managedでアイコンを使ったり、アイコンを含めたボタンを作成します。

参考にしたリンクは以下。

React Native 0.60 Expo v34

続きを読む React Native, Expoでアイコンを使う

React Native, ExpoでドラムロールUI入力

モーダルを出さずにくるくる回して設定するUIをExpoで使いたい。

マザー2の影響かドラムロールUIって言ってしまいますが、一般的にはwheelらしいです。spinnerって言ってるのもありましたが、これは他にも色んな意味を指しすぎなので使いにくい(ローディング、時計など円状のUI、数値入力の横の▲▼など)。

続きを読む React Native, ExpoでドラムロールUI入力

React Native, Expoで端末内の画像取得と保存

画像系のアプリを作ろうと思ったら、端末の画像を読み取ったり保存したい。

出来たらExpoで完結したいので色々方法を調べてみた。

制限に沿わない場合はワークフロー見つつBareに切り替えることも考える。

React Native 0.60 Expo v34

続きを読む React Native, Expoで端末内の画像取得と保存

React Native, Expoを使ってみる

React Nativeを使ってアンドロイドのテストアプリを作ってみます。

ネイティブな部分は後回しにするとしてExpoを使って簡単に。

続きを読む React Native, Expoを使ってみる