diff --git a/app/roll.js b/app/roll.js
index 436ac9b..8066d42 100644
--- a/app/roll.js
+++ b/app/roll.js
@@ -5,7 +5,8 @@ import React, { Component, PropTypes } from 'react';
import {
View,
Text,
- PanResponder
+ PanResponder,
+ Animated
} from 'react-native';
import {rollStyles} from './style';
@@ -43,6 +44,8 @@ class Pickroll extends Component {
constructor(props, context){
super(props, context);
this.state = this._stateFromProps(props);
+ this.init = true;
+ this.moveDy = 0;
}
/**
@@ -77,22 +80,13 @@ class Pickroll extends Component {
*/
_move(dy){
let index = this.index;
- this.middleHeight = Math.abs(-index * 40 + dy);
- this.up && this.up.setNativeProps({
- style: {
- marginTop: (3 - index) * 30 + dy * 0.75
- }
- });
+ this.moveDy = dy;
this.middle && this.middle.setNativeProps({
style: {
- marginTop: -index * 40 + dy
- }
- });
- this.down && this.down.setNativeProps({
- style: {
- marginTop: (-index - 1) * 30 + dy * 0.75
+ top: - 36 * index + 72 + dy
}
});
+ this.forceUpdate();
}
/**
@@ -106,7 +100,7 @@ class Pickroll extends Component {
let diff = _index - index;
let marginValue;
if (diff && !this.isMoving) {
- marginValue = diff * 40;
+ marginValue = diff * 36;
this._move(marginValue);
this.index = index;
this._onValueChange();
@@ -127,9 +121,9 @@ class Pickroll extends Component {
}
if (dy > 0) {
- this._move(dy > this.index * 40 ? this.index * 40 : dy);
+ this._move(dy > this.index * 36 ? this.index * 36 : dy);
} else {
- this._move(dy < (this.index - this.state.items.length + 1) * 40 ? (this.index - this.state.items.length + 1) * 40 : dy);
+ this._move(dy < (this.index - this.state.items.length + 1) * 36 ? (this.index - this.state.items.length + 1) * 36 : dy);
}
}
@@ -140,9 +134,15 @@ class Pickroll extends Component {
* @private
*/
_handlePanResponderRelease(evt, gestureState){
- let middleHeight = this.middleHeight;
- this.index = middleHeight % 40 >= 20 ? Math.ceil(middleHeight / 40) : Math.floor(middleHeight / 40);
- this._move(0);
+ let diff;
+ diff = Math.abs(this.moveDy) % 36 >= 18 ? Math.ceil(Math.abs(this.moveDy / 36)) : Math.floor(Math.abs(this.moveDy / 36));
+ if (this.moveDy >= 0) {this.index = this.index - diff} else {this.index = this.index + diff;}
+ this.middle && this.middle.setNativeProps({
+ style: {
+ top: - 36 * this.index + 72
+ }
+ });
+ this.moveDy = 0;
this._onValueChange();
}
@@ -151,8 +151,9 @@ class Pickroll extends Component {
*/
componentWillMount(){
this._panResponder = PanResponder.create({
- onMoveShouldSetPanResponder: (evt, gestureState) => true,
- onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
+ onStartShouldSetPanResponder: this._handleStartShouldSetPanResponder.bind(this),
+ onMoveShouldSetPanResponder: this._handleStartShouldSetPanResponder.bind(this),
+ onPanResponderGrant: this._handlePanResponderGrant.bind(this),
onPanResponderRelease: this._handlePanResponderRelease.bind(this),
onPanResponderMove: this._handlePanResponderMove.bind(this)
});
@@ -160,37 +161,31 @@ class Pickroll extends Component {
this.index = this.state.selectedIndex;
}
+ _handleStartShouldSetPanResponder(e, gestureState){
+ return true;
+ }
+
+ _handlePanResponderGrant(){
+ console.debug('Start to move');
+ }
/**
* 对单轮的每个格子进行初始化
* @param items {array} 需要渲染的总的数据
* @returns {{upItems: Array, middleItems: Array, downItems: Array}}
* @private
*/
- _renderItems(items){
+ _renderItems(items, init){
let upItems = [], middleItems = [], downItems = [];
items.forEach((item, index) => {
- upItems[index] = {this._moveTo(index);}} >
- {item.label}
- ;
-
+ console.debug((1- Math.abs((index - this.index)*36 + this.moveDy)/36 * 0.05) * 22);
middleItems[index] = {item.label}
- ;
- downItems[index] = {this._moveTo(index);}} >
- {item.label}
+ style={[rollStyles.middleText, this.state.itemStyle, {fontSize: (1- Math.abs((index - this.index)*36 + this.moveDy)/36 * 0.07) * 22, opacity: 1- Math.abs((index - this.index)*36 + this.moveDy)/36 * 0.4}]}>{item.label}
;
});
- return { upItems, middleItems, downItems };
+
+ return middleItems;
}
/**
@@ -209,40 +204,24 @@ class Pickroll extends Component {
* @returns {XML}
*/
render(){
+
let index = this.state.selectedIndex;
let length = this.state.items.length;
- let items = this._renderItems(this.state.items);
- let upViewStyle = {
- marginTop: (3 - index) * 30,
- height: length * 30
- };
+ this.init = false;
let middleViewStyle = {
- marginTop: -index * 40
- };
- let downViewStyle = {
- marginTop: (-index - 1) * 30,
- height: length * 30
+ position: 'absolute',
+ top: - 36 * index + 72
};
return (
-
-
-
- { this.up = up }} >
- { items.upItems }
-
-
-
+
+
+
{ this.middle = middle }} >
- { items.middleItems }
-
-
-
- { this.down = down }} >
- { items.downItems }
+ { this._renderItems(this.state.items) }
-
+
);
}
diff --git a/app/setup3.js b/app/setup3.js
index e9a4d68..83ed753 100644
--- a/app/setup3.js
+++ b/app/setup3.js
@@ -11,6 +11,7 @@ import {
Animated,
Platform,
PickerIOS,
+ StatusBar,
Modal,
Image,
} from 'react-native';
@@ -86,6 +87,9 @@ class TMPicker extends Component {
this.state.animatedHeight = new Animated.Value(height);
}
+ componentDidMount() {
+ this._setEventBegin();
+ }
/**
* 状态初始化
* @param props {object} 继承的属性
@@ -179,7 +183,7 @@ class TMPicker extends Component {
this.setState({visible: visible});
Animated.timing(
this.state.animatedHeight,
- {toValue: height-250}
+ {toValue: height-StatusBar.currentHeight-220}
).start();
}else{
Animated.timing(
@@ -213,6 +217,7 @@ class TMPicker extends Component {
* @returns {XML}
*/
render(){
+ console.debug(StatusBar.currentHeight);
return (
{this.state.str}
- {
- this.setState({str:str});
- }}
- />
-
-
-
+
{this.setState({str1:str});}}
visible = {false}
/>