Yui parallax cell

demo/Demo.js

@@ -12,9 +12,7 @@ import ButtonDemo from './demos/ButtonDemo';
 import ViewPagerDemo from './demos/ViewPagerDemo';
 import TabBarDemo from './demos/TabBarDemo';
 import MediaKitDemo from './demos/MediaKitDemo';
-
-
-
+import ParallaxViewDemo from './demos/ParallaxViewDemo';
 
 export default class Demo extends Component {
   render() {
@@ -57,5 +55,8 @@ export default class Demo extends Component {
     if(route.name === 'MediaKit') {
       return <MediaKitDemo />
     }
+    if(route.name === 'ParallaxView') {
+      return <ParallaxViewDemo />
+    }
   }
 }

demo/demos/DemoList.js

@@ -42,7 +42,12 @@ const dataSource = ds.cloneWithRowsAndSections({
     {
       name: 'MediaKit',
       desc: '媒体播放'
-    },],
+    },
+    {
+      name: 'ParallaxView',
+      desc: '视差效果'
+    },
+  ],
   'Control Components': [
     {
       name: 'RefreshControl',

demo/demos/ParallaxViewDemo.js

@@ -0,0 +1,152 @@
+'use strict';
+
+import React, {Component} from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  ScrollView,
+  Dimensions,
+  PixelRatio,
+  Animated,
+} from 'react-native';
+
+import {ParallaxView} from 'react-native-yui';
+
+let WINDOW_WIDTH = Dimensions.get('window').width;
+let WINDOW_HEIGHT = Dimensions.get('window').height;
+let IMAGE_HEIGHT = WINDOW_WIDTH / 1.5;
+let PIXEL_RATIO = PixelRatio.get();
+let PARALLAX_FACTOR = 0.5;
+
+let SECTIONS = [
+  {
+    title: '隐形舒适,美不留痕',
+    source:require('../jpg/tampon0.jpg')
+  },
+  {
+    title: '更IN,更美,更轻松',
+    source:require('../jpg/tampon1.jpg')
+  },
+  {
+    title: '随心而动,精彩不停',
+    source:require('../jpg/tampon2.jpg')
+  },
+  {
+    title: '完美细节,时刻贴心',
+    source:require('../jpg/tampon3.jpg')
+  },
+  {
+    title: '定位准,易置入',
+    source:require('../jpg/tampon4.jpg')
+  },
+  {
+    title: '丝缎般光滑触感',
+    source:require('../jpg/tampon5.jpg')
+  },
+  {
+    title: 'WCM世界级制造标准',
+    source:require('../jpg/tampon6.jpg')
+  },
+  {
+    title: '反复打磨细节之处',
+    source:require('../jpg/tampon7.jpg')
+  },
+  {
+    title: '选取最优质材料',
+    source:require('../jpg/tampon8.jpg')
+  },
+  {
+    title: '配送更快更安心',
+    source:require('../jpg/tampon9.jpg')
+  }
+];
+
+export default class DemoSection1 extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      horizontal: false,
+      pagingEnabled:false
+    }
+  }
+
+  onPress() {
+    this.setState({
+      horizontal:!this.state.horizontal,
+      pagingEnabled: !this.state.pagingEnabled
+    })
+  }
+
+  render() {
+    let parallaxViewStyle = {
+      height: this.state.horizontal ? WINDOW_HEIGHT - 100 : IMAGE_HEIGHT,
+      width: WINDOW_WIDTH,
+      marginTop: 10,
+      marginRight : this.state.horizontal? 10:0
+    };
+
+    let content = (
+      SECTIONS.map((section, i) =>(
+        <ParallaxView
+          key={i}
+          style={{...parallaxViewStyle}}
+          overlayStyle={styles.overlay}
+          source={section.source}
+          parallaxFactor={PARALLAX_FACTOR}
+        >
+          <Text style={styles.title}>{section.title}</Text>
+          <Text style={styles.url}>Source: {'www.yoai.com'}</Text>
+        </ParallaxView>
+      ))
+    );
+
+    return (
+      <View style={{flex:1,backgroundColor:'white'}}>
+        <View style={{marginTop:30,alignSelf:'center',width:150,height:30,borderWidth:PIXEL_RATIO,alignItems:'center',justifyContent:'center'}}>
+          <Text onPress={this.onPress.bind(this)}>
+            { this.state.horizontal ? '水平方向' : '垂直方向'}
+          </Text>
+        </View>
+        <ParallaxView.ScrollView
+          style = {{width:WINDOW_WIDTH + 10}}
+          pagingEnabled={this.state.pagingEnabled}
+          scrollEventThrottle={16}
+          horizontal={this.state.horizontal}>
+          {content}
+        </ParallaxView.ScrollView>
+      </View>
+    );
+  }
+};
+
+var styles = StyleSheet.create({
+  overlay: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  title: {
+    fontSize: 20,
+    textAlign: 'center',
+    lineHeight: 25,
+    fontWeight: 'bold',
+    color: 'white',
+    shadowOffset: {
+      width: 0,
+      height: 0,
+    },
+    shadowRadius: 1,
+    shadowColor: 'black',
+    shadowOpacity: 0.8,
+  },
+  url: {
+    opacity: 0.5,
+    fontSize: 10,
+    position: 'absolute',
+    color: 'white',
+    left: 5,
+    bottom: 5,
+  }
+});

index.js

@@ -59,7 +59,10 @@ var YUI = {
   },
   get DatePicker() {
     return ReactNative.DatePicker;
+  },
+  get ParallaxView() {
+    return require('./library/parallax/ParallaxView').default;
   }
-}
+};
 
 module.exports = YUI;

library/parallax/ParallaxScrollView.js

@@ -0,0 +1,66 @@
+import React, {Component, PropTypes} from 'react';
+import {
+  Animated,
+  ScrollView
+} from 'react-native';
+
+import ParallaxView from './ParallaxView';
+
+
+var applyPropsToParallaxImages = function (children, props) {
+
+  if (children instanceof Array) {
+    return children.map(child => {
+      if (child instanceof Array) {
+        return applyPropsToParallaxImages(child, props);
+      }
+      if (child.type === ParallaxView) {
+        return React.cloneElement(child, props);
+      }
+      return child;
+    });
+  }
+  if (children.type === ParallaxView) {
+    return React.cloneElement(children, props);
+  }
+  return children;
+};
+
+
+export default class ParallaxScrollView extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {}
+  }
+
+  componentWillMount() {
+    var scrollValue = new Animated.Value(0);
+    this.setState({scrollValue});
+  }
+
+  onParallaxScroll(event) {
+    const {nativeEvent: {contentOffset: {y: offsetY, x: offsetX}}} = event;
+    this.state.scrollValue.setValue( this.props.horizontal ? offsetX : offsetY);
+  }
+
+  render() {
+    let {children, onScroll, horizontal, ...props} = this.props;
+    let {scrollValue} = this.state;
+    let handleScroll = (onScroll
+        ? event => { this.onParallaxScroll(event); onScroll(event); }
+        : this.onParallaxScroll
+    );
+    children = children && applyPropsToParallaxImages(children, {scrollValue, horizontal});
+    return (
+      <ScrollView
+        {...props}
+        scrollEventThrottle={16}
+        onScroll={handleScroll.bind(this)}
+        horizontal={horizontal}
+      >
+        {children}
+      </ScrollView>
+    )
+  }
+}