个人中心tab悬浮 review by 阿瑟

@@ -32,8 +32,8 @@ export default class User extends React.Component {
 
         userInfo: ImmutablePropTypes.contains({
             avatar: React.PropTypes.string,
-            bgImage:React.PropTypes.string,
-            userName:React.PropTypes.string.isRequired,
+            backgroundImage:React.PropTypes.string,
+            nickName:React.PropTypes.string.isRequired,
             sign: React.PropTypes.string,
         }),
 
@@ -127,9 +127,9 @@ export default class User extends React.Component {
         onRefresh: React.PropTypes.func,
     };
 
-
     constructor(props) {
         super (props);
+
         this.currentPage = 0;
         this.tabs = ['我的帖子', '我赞过的', '我的回复'];
         this.scrollableTabView = null;
@@ -137,14 +137,17 @@ export default class User extends React.Component {
             scrollValueH: new Animated.Value(this.currentPage),
             scrollValueV: new Animated.Value(0),
             listViewMarginTop: new Animated.Value(0),
-
+            listViewTop: 0,
         };
 
+        this.lastValue = 0;
+
         this._renderSectionHeader = this._renderSectionHeader.bind(this);
         this._renderRow = this._renderRow.bind(this);
         this._renderSeparator = this._renderSeparator.bind(this);
         this._updateHorizontalScrollValue = this._updateHorizontalScrollValue.bind(this);
         this._updateVerticalScrollValue = this._updateVerticalScrollValue.bind(this);
+        this.setAnimationValue = this.setAnimationValue.bind(this);
         this.dataSource = new ListView.DataSource({
             rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
             sectionHeaderHasChanged: (s1, s2) => !Immutable.is(s1, s2),
@@ -160,28 +163,39 @@ export default class User extends React.Component {
     }
 
     setAnimationValue({ value, }) {
-        // if (value <= 2) {
 
-            console.log('value ============= >' + value);
+        if (value < 0) {
+            return;
+        }
+
+        if (this.lastValue > value) {
+            //down
+            if (value < 2) {
+                let top = 64 * (value - 1);
+                top = top > 64 ? 64 : top;
+                top = top < 0 ? 0 : top;
                 this.animView && this.animView.setNativeProps({
                     style: {
-                    top: 120,
+                        top,
                     },
                 });
+            }
 
-            // this.listView && this.listView.setNativeProps({
-            //     style: {
-            //         marginTop: value,
-            //     },
-            // });
-
-            // value = value > 1 ? 1 : value;
-            // this.image.setNativeProps({
-            //     style: {
-            //         opacity: value,
-            //     },
-            // });
-        // }
+        } else {
+            //up
+            if (value > 0.9) {
+                let top = 64 * (value - 0.6)
+                top = top > 64 ? 64 : top;
+                top = top < 0 ? 0 : top;
+                this.animView && this.animView.setNativeProps({
+                    style: {
+                        top,
+                    },
+                });
+            }
+
+        }
+        this.lastValue = value;
     }
 
     _renderRow(rowData, sectionID, rowID, highlightRow) {
@@ -244,11 +258,10 @@ export default class User extends React.Component {
                 );
                 break;
             default:
-
+                return null;
         }
     }
 
-
     _renderSectionHeader(sectionData, sectionID) {
         switch (sectionID) {
 			case 'list':
@@ -282,14 +295,9 @@ export default class User extends React.Component {
     }
 
     _updateVerticalScrollValue(offsetY) {
-        // console.log('value ============ ' + offsetY/180);
-        this.state.scrollValueV.setValue(offsetY/180);
-        // this.state.listViewMarginTop =
-        if (offsetY >= 180) {
-            this.state.listViewMarginTop.setValue(64);
-        } else {
-            this.state.listViewMarginTop.setValue(offsetY);
-        }
+
+        this.state.scrollValueV.setValue(offsetY/150);
+        this.state.listViewMarginTop.setValue(offsetY/150);
 
     }
 
@@ -306,10 +314,9 @@ export default class User extends React.Component {
                     ref={(c) => {
                         this.animView = c;
                     }}
-                style={{flex:1, backgroundColor: 'red'}}
+                    style={{flex:1, backgroundColor: 'transparent', top: this.state.listViewTop}}
                 >
                     <ListView
-                        style={{flex:1, marginTop: 0}}
                         ref={(c) => {
                             this.listView = c;
                         }}
@@ -343,17 +350,12 @@ export default class User extends React.Component {
                             const offsetY = e.nativeEvent.contentOffset.y;
                             this._updateVerticalScrollValue(offsetY);
                         }}
-                        // scrollEventThrottle={16}
-                    >
-
-                    </ListView>
-
+                    />
                 </Animated.View>
 
                 <UserNavBar scrollValue={this.state.scrollValueV} channel={this.props.channel}/>
-
             </View>
-        )
+        );
     }
 }