LayoutAnimationのススメ

はじめに この記事はmedium上でバズったJustin PoliachikによるReact Native’s LayoutAnimation is Awesome の翻訳記事です。全てのコード、画像、文章は全て許可を得て転載しており全ての権利は原著者に属します。 本編 LayoutAnimation を知らないReact Nativeエンジニアは間違いなく損をしています。 私は一端のiOSエンジニアとしてReact Nativeの世界に入り、最初こそCoreAnimationの様な利便性を失うのではないか、と心配でした。ネイティブのUIViewは素晴らしいもので適切なプロパティをviewにセットすれば期待通り動きます。一方でReact NativeのAnimated API も近いしい機能は備えており、良く出来ていますがそれぞれのアニメーションに対してstateを定義するのはコードがすぐに荒れますし、非常に複雑です。 そこでLayoutAnimationの出番です。ドキュメントが充実していないですが、安心してください。本当に素晴らしいです。 例えばn個のレイアウトの変更があった時、1行のコードでこのアニメーションを定義出来てしまいます。Viewがre-renderをする度にアニメーション部分をLayoutAnimationがよしなにハンドリングをしてくれます。大きくて複雑なviewsにとってこれは本当にPOWERFULです。 この例では3つのstateを持ちうる複雑なviewを用意しました。Heights, widths, and item countsはそれぞれ index stateによって決定されます。 上の例では一切のアニメーションが行われていないチープなアプリになっています。 // Called when a top button is pressed, with index corresponding to button title. onPress(index) { this.setState({index: index}); } それではこれにたった一行の LayoutAnimation のコードを加えて見ましょう。 LayoutAnimation.configureNext(LayoutAnimation.Presets.spring); これによって全てのlayoutの変更に対して spring アニメーションが加えられるのです sexyではないでしょうか? // Called when a top button is pressed, with index corresponding to

Read more

React Native ✖️ Expoで始める楽々アプリ開発環境

最終更新日: 2017/06/26 環境: macOS, nvm(v0.33.2), node(v6.11.0) 目的: React Nativeの開発環境を作る 上記はこの記事を記した当時の環境です。最低でも3ヶ月に一度は最新の情報を取り入れたものにアップデートをするようします。 また、この記事に対するPull Requestはこちらへ React Native...facebookやinstagramのモバイルアプリに導入されておるReactベースのコード1つでiOSとAndroidアプリをビルドするネイティブアプリのハイブリッド開発環境。 この手の発想は今までにも存在しその良し悪しは議論されてきたが、筆者はJavascriptランタイムによるアプローチ、facebookを中心とするreactの思想(learn once, write anywhere)やコミュニティの熱量からこの技術への確信を得ています。 また今回使用するexpoと呼ばれるreact nativeのsdk(当人曰く「translation machine for mobile app code」)は非常に筋の良い快適な開発環境を提供してくれる。またexpoのチームメンバーはQuoraのco-founderでfacebookやamazonでも活躍したCharlie Cheeverを中心とする大変優秀なメンバーでY combinatorからの出資という後押しもあり個人的にはreact nativeを語る上では外せないスタックである。 参考リンク: http://fortune.com/2016/08/23/charlie-cheever-y-combinator/ How to React Native ✖️ Expo: 10分ほどの初期設定を済ませば、xcodeもandroid studio不要でvim(好きなエディタ)でyarn(npm)のwatchタスクで実機に差分をビルドしつつという快適な開発環境を得れます。 (vimで開発してfile更新でQRコードでsyncさせた実機にbuildみたいな感じでやっています。) 1. Install nvm nodeのバージョン管理マネジャーを入れていない方は入れる事をオススメします。nvm が中でもオススメです。 $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.

Read more