React.js
Pocket

文章で説明しづらいのですが、Twitterアプリのプロフィールにあるカバー画像のような動きを付けてくれます。

parallaxview

react-native-parallax-view

インストール

yarnやnpmでインストールします。

// yarn
yarn add react-native-parallax-view

// npm
npm i react-native-parallax-view --save

サンプルコード

import ParallaxView from 'react-native-parallax-view'

const MyNavScreen = () => (
  <ParallaxView
    backgroundSource={require('./images/sample1.jpg')}
    windowHeight={200}
    header={(
      <View style={styles.header}>
        <Thumbnail source={require('./images/sample3.jpg')} />
      </View>
    )}
    scrollableViewStyle={{ backgroundColor: '#fff' }}
  >
    <View>
      // ... scrollview content
    </View>
  </ParallaxView>
)

こんな感じで書けば簡単に導入できます。

欲を言えば、背景画像をちょっと暗くしたり、Twitterみたいに引っ張ったらぼかしたりできたらいいなと思います。どうもReactNativeはCSSのfilter使えないっぽいので、どうしたらいいか…。

react-native-parallax-viewのソースコードを見てみると、ぼかしはやろうとしてる感じはあるんですが(コメントアウトされてる)、しばらく更新ないですね…。

さくっと、こういう動きを付けたい時にはよさそうですね。アプリっぽい感じがする。

Pocket

Category : Tag :