react-native-parallax-view

> 编程语言

Open source

Parallax view for vertical scrollview/listviews with a header image and header content

1.3K stars0 likes2 views

Website GitHub

About

Parallax view for vertical scrollview/listviews with a header image and header content

react-native-parallax-view

Parallax view for vertical scrollview with a header image and header content

Installation

bash

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

Demo

NOTE: I will put up an rnplay.org working example whenever they support React Native 0.8.0

Example

There is a working example in the project /example folder that you can check out. Remember to run npm install inside the example folder if you'd like to run that project.

bash

cd react-native-parallax-view
cd example
npm install

Additionally, here is an example of the usage

javascript


            Header Content
        
    )}
    scrollableViewStyle={{ backgroundColor: 'red' }}
>
  
    // ... scrollview content

API (props)

Prop	Required	Default	Type	Description
backgroundSource	YES	`null`	`object`	the `source` prop that get's passed to the background `` component. If left blank, no background is rendered
header	NO	`null`	`renderable`	any content you want to render on top of the image. This content's opacity get's animated down as the scrollview scrolls up. (optional)
windowHeight	NO	`300`	`number`	the resting height of the header image. If 0 is passed in, the background is not rendered.
scrollableViewStyle	NO	`null`	`object`	this style will be mixed (overriding existing fields) with scrollable view style (view which is scrolled over the background)
...	NO		`...ScrollViewProps`	`{...this.props}` is applied on the internal `ScrollView` (excluding the `style` prop which is passed on to the outer container)