React Native (Expo)でカメラプレビューにエフェクト

Expoでカメラを使う時ライブプレビュー画面にgl-reactでエフェクトをかけたい。

gl-reactに関してはこことかこことかここも参照。

結論を書くとあまりスマートな方法で解決はできなかったです。

 

関連リンク

続きを読む React Native (Expo)でカメラプレビューにエフェクト

React Nativeで非同期処理の結果を初期値にしたい

AsyncStorageのような永続データを読み込んで初期値にしたい。

データ読み込みのような非同期処理は基本的に初期値には出来ない。

使っていたコンポーネントの初期値指定タイミングでハマったのでメモ。

続きを読む React Nativeで非同期処理の結果を初期値にしたい

React Native, Expoにおける永続化

ReactNativeで永続化する手段としてAsyncStorageがある。

これは文字列のみの保存で毎回処理を書かないといけないのもあり、人気のあるラッパーの react-native-storage を使うことを考えた(expo managedで済ませたい&導入コストが高そうなのでrealmのことは考えない)

するとバージョンがらみで多少混乱したので整理してみます。

Expo SDK 35( react native 0.59.8 )

続きを読む React Native, Expoにおける永続化

ReactNativeでよく使う処理をライブラリ化する

同じ機能を作るのにパッケージを調べたりコピペしたりしたくない。

作った機能を切り出ししてプライベートリポジトリで管理してみたいと思います。

 

続きを読む ReactNativeでよく使う処理をライブラリ化する

React Native+OpenGLで描画した画像をファイルに保存

React Native (expo) + Open GL で遊んでいると描画したものを保存したくなる。

需要ありそうな気がするんだけど全然情報がないので手探りでやってみます。

続きを読む React Native+OpenGLで描画した画像をファイルに保存

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でスクリーンショットを撮る