Yui center content

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 CenterContent from './demos/CenterContent';
 
 export default class Demo extends Component {
   render() {
@@ -56,6 +54,8 @@ export default class Demo extends Component {
     }
     if(route.name === 'MediaKit') {
       return <MediaKitDemo />
+    }if(route.name === 'CenterCell') {
+      return <CenterContent />
     }
   }
 }

demo/demos/CenterContent.js

@@ -0,0 +1,143 @@
+'use strict';
+
+import React, {Component, PropTypes} from 'react';
+import {
+  Image,
+  View,
+  Text,
+  PixelRatio,
+  ScrollView
+} from 'react-native';
+
+// import {CenterContentView} from 'react-native-yui';
+import CenterContentView from 'react-native-center-content-view';
+
+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 Demo extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      scale: 0.8,
+      opacity: 1,
+      rotateLeft: "0deg",
+      rotateRight: "0deg",
+      type: "Scale"
+    }
+  }
+
+  renderCell(data) {
+    return (
+      <View
+        style={{width:200,height:200,shadowColor:'green',shadowOffset:{width:0,height:0},shadowOpacity:1}}
+      >
+        <Image
+          style={{width:200,height:200}}
+          source={data.source}/>
+      </View>
+    )
+  }
+
+  handleOnPress() {
+    if (this.state.type == "Scale") {
+      this.setState({
+        scale: 1,
+        opacity: 0.3,
+        type: "Opacity"
+      })
+    } else if (this.state.type == "Opacity") {
+      this.setState({
+        opacity: 1,
+        rotateLeft: "-20deg",
+        rotateRight: "20deg",
+        type: "Rotate"
+      })
+    } else if (this.state.type == "Rotate") {
+      this.setState({
+        scale: 0.8,
+        rotateLeft: "0deg",
+        rotateRight: "0deg",
+        type: "Scale"
+      })
+    }
+  }
+
+  render() {
+    return (
+      <ScrollView style={{marginTop:20, backgroundColor:'white'}}>
+        <View
+          style={{justifyContent:'center',alignItems:'center',borderWidth:1/PixelRatio.get(),width:300,height:50,alignSelf:'center'}}>
+          <Text style={{fontSize:20}}>
+            CenterContentViewDemo
+          </Text>
+        </View>
+
+
+        <CenterContentView
+          style={{height:300,marginTop:20,backgroundColor:'#EBEBEB',overflow:'hidden',alignItems:'center'}}
+          space={30}
+          scale={this.state.scale}
+          opacity={this.state.opacity}
+          rotateLeft={this.state.rotateLeft}
+          rotateRight={this.state.rotateRight}
+          data={SECTIONS}
+          initialIndex={3}
+          renderCell={this.renderCell.bind(this)}
+        />
+        <View
+          style={{marginTop:20,width : 200 , height: 50,borderWidth:1 / PixelRatio.get(),justifyContent:'center',alignItems:'center',alignSelf:'center'}}
+        >
+          <Text
+            onPress={this.handleOnPress.bind(this)}
+          >
+            {this.state.type}
+          </Text>
+        </View>
+      </ScrollView>
+    )
+  }
+}
+
+

demo/demos/DemoList.js

@@ -42,7 +42,12 @@ const dataSource = ds.cloneWithRowsAndSections({
     {
       name: 'MediaKit',
       desc: '媒体播放'
-    },],
+    },
+    {
+      name: 'CenterCell',
+      desc: '自动将Cell置于屏幕中间'
+    },
+  ],
   'Control Components': [
     {
       name: 'RefreshControl',

demo/demos/PanTest.js

@@ -0,0 +1,133 @@
+import React, {Component} from 'react';
+import {View, PanResponder, Animated} from 'react-native';
+
+
+export default class PanTest extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      offSetValue: new Animated.ValueXY(),
+      offSetValue1: new Animated.ValueXY()
+    }
+  }
+
+  componentWillMount() {
+    this._panResponder = PanResponder.create({
+      // 要求成为响应者：
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
+
+        // gestureState.{x,y}0 现在会被设置为0
+        this.state.offSetValue.setOffset({x: this.state.offSetValue.x._value, y: this.state.offSetValue.y._value});
+        this.state.offSetValue.setValue({x: 0, y: 0});
+
+      },
+      onPanResponderMove: Animated.event([null, {
+        dx: this.state.offSetValue.x,
+        dy: this.state.offSetValue.y
+      }]),
+      onPanResponderTerminationRequest: (evt, gestureState) => true,
+      onPanResponderRelease: (evt, gestureState) => {
+        this.state.offSetValue.flattenOffset();
+        // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
+        // 一般来说这意味着一个手势操作已经成功完成。
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
+        // 默认返回true。目前暂时只支持android。
+        return true;
+      },
+    });
+
+
+    this._panResponder1 = PanResponder.create({
+      // 要求成为响应者：
+      onStartShouldSetPanResponder: (evt, gestureState) => true,
+      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
+      onMoveShouldSetPanResponder: (evt, gestureState) => true,
+      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
+
+      onPanResponderGrant: (evt, gestureState) => {
+        // 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
+
+        // gestureState.{x,y}0 现在会被设置为0
+        this.state.offSetValue1.setOffset({x: this.state.offSetValue1.x._value, y: this.state.offSetValue1.y._value});
+        this.state.offSetValue1.setValue({x: 0, y: 0});
+
+      },
+      onPanResponderMove: Animated.event([null, {
+        dx: this.state.offSetValue1.x,
+        dy: this.state.offSetValue1.y
+      }]),
+      onPanResponderTerminationRequest: (evt, gestureState) => true,
+      onPanResponderRelease: (evt, gestureState) => {
+        this.state.offSetValue1.flattenOffset();
+        // 用户放开了所有的触摸点，且此时视图已经成为了响应者。
+        // 一般来说这意味着一个手势操作已经成功完成。
+      },
+      onPanResponderTerminate: (evt, gestureState) => {
+        // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
+      },
+      onShouldBlockNativeResponder: (evt, gestureState) => {
+        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
+        // 默认返回true。目前暂时只支持android。
+        return true;
+      },
+    });
+  }
+
+  render() {
+
+    let {offSetValue,offSetValue1} = this.state;
+
+    let [translateX,translateY] = [offSetValue.x, offSetValue.y];
+
+    let scale = offSetValue.x.interpolate({
+      inputRange: [-100000,-100,0,100,100000],
+      outputRange: [0.8,0.8,1,0.8,0.8]
+    });
+
+    let animatedStyle = {transform: [{translateX}, {translateY},{scale}]};
+
+    let [translateX1,translateY1] = [offSetValue1.x, offSetValue1.y];
+
+    let scale1 = offSetValue.x.interpolate({
+      inputRange: [-100000,-200,-100,0,100000],
+      outputRange: [0.8,0.8,1,0.8,0.8]
+    });
+    let animatedStyle1 = {transform: [{translateX}, {translateY},{scale:scale1}]};
+
+    // let animatedStyle1 = {transform: [{translateX:translateX1}, {translateY:translateY1},{scale:scale1}]};
+
+    return (
+      <View
+      style = {{justifyContent:'center',alignItems:'center',flex:1,flexDirection:'row'}}
+      >
+        <View
+        style ={{width:200,height:200,backgroundColor:'red',shadowColor:'green',shadowOffset:{width:0,height:0},shadowOpacity:1}}
+        />
+        <Animated.View
+          {...this._panResponder.panHandlers}
+          style={{...animatedStyle,width: 100,height:100,backgroundColor:'red'}}
+        >
+
+        </Animated.View>
+        <Animated.View
+          {...this._panResponder.panHandlers}
+          style={{...animatedStyle1,width: 100,height:100,backgroundColor:'red'}}
+        >
+
+        </Animated.View>
+      </View>
+    )
+  }
+}

index.js

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