メモメモメモ

ほんとうにめも

【ReactNative】コスパ良くクオリティ上げるならとりあえずLayoutAnimation入れとこ

ReactNative 個人開発

苦労せずになんとなーくアプリのクオリティを上げたいあなたにおすすめです。 Animationを適用したいScreenのcomponentWillUpdateにでも書いておきます。

  import { LayoutAnimation } from 'react-native'

  ---------------------------------------------

  componentWillUpdate() {
    LayoutAnimation.easeInEaseOut()
  }

↓は開発中のアプリに適用してみた例。 「パッ」じゃなくて「フワッ」っとなってる感じ。。。わかるかな？w

f:id:yooska14:20181021003043g:plain

f:id:yooska14:20181021003043g:plain
開発してるアプリに導入してみた

アニメーションのオプションは

  • easeInEaseOut
  • linear
  • spring

があるみたいなので、全部試して好みを見つけると良さそうです。 個人的にはScreenに適用するならeaseInEaseOut一択です。 こんな感じでもっとかっちょいいアニメーションにもできる。

LayoutAnimation.configureNext({
  duration: 700,
  create: {
    type: 'linear',
    property: 'opacity',
  },
  update: {
    type: 'spring',
    springDamping: 0.4,
    property: 'scaleXY',
  },
  delete: {
    type: 'linear',
    property: 'opacity',
  },
})

※参考: https://blog.callstack.io/react-native-animations-revisited-part-i-783143d4884

僕はそんなに凝れないので極力やらないが、

onPress()なんかの最初に書いておいて発火されるたびにAnimationをかけることもできる。

※参考: rskull.hateblo.jp

特別な理由がなければ、ほぼ全てのScreenに入れて良いはず。 これ入れとくだけで「あ、ちゃんと凝ってんな」って思われそう。