开发者社区> 镜像站> NPM> react-native-parallax
react-native-parallax
Parallax effects for React Native using Animated API
Last updated 4 years ago by oblador .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-parallax 
SYNC missed versions from official npm registry.

react-native-parallax

NOTE: This module requires React Native 0.8+

Installation

npm install --save react-native-parallax

Usage

Note: Parallax.Image elements must be direct descendants of Parallax.ScrollView

var Parallax = require('react-native-parallax');

var ParallaxView = React.createClass({
  render: function() {
    return (
      <Parallax.ScrollView>
        <Parallax.Image
          style={{ height: 200 }}
          overlayStyle={{ backgroundColor: 'rgba(0,0,0,0.3)'}}
          source={{ uri: 'http://loremflickr.com/640/480' }}
        >
          <Text>This is optional overlay content</Text>
        </Parallax.Image>
      </Parallax.ScrollView>
    );
  },
});

Parallax.ScrollView Properties

Any ScrollView property and the following:

Prop Description Default
scrollViewComponent What underlying component to compose around, must be ScrollView compatible. ScrollView

Parallax.Image Properties

Any Image property and the following:

Prop Description Default
onPress Fired when element is tapped. None
imageStyle Optional image style, width and height styles are set automatically. None
overlayStyle Optional overlay style, might be useful if you want a shaded background for better readability. None
parallaxFactor The speed of the parallax effect. Larger values require taller images or they will be zoomed in. 0.2

Demo

Demo

Example

Check full example in the Example folder.

License

MIT License. © Joel Arvidsson

Current Tags

  • 0.3.0                                ...           latest (4 years ago)

8 Versions

  • 0.3.0                                ...           4 years ago
  • 0.2.2                                ...           5 years ago
  • 0.2.1                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.3                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 1
Last Month 1
Dependencies (1)
Dev Dependencies (0)
None