mobile / YH_RNComponent · Commits

Go to a project

Authored by 于良
Commit c22ad04066f72592e78f4bba766ca8a42e464806 1 parent a0040e66

社区首页nabber动画优化 review by 盖剑秋

Inline Side-by-side
Showing 3 changed files with 135 additions and 85 deletions
@@ -50,6 +50,7 @@ import SettingContainer from './containers/UserSettingContainer'; @@ -50,6 +50,7 @@ import SettingContainer from './containers/UserSettingContainer';
50 import LikeListContainer from './containers/LikeListContainer'; 50 import LikeListContainer from './containers/LikeListContainer';
51 import SystemMessageContainer from './containers/SystemMessageContainer'; 51 import SystemMessageContainer from './containers/SystemMessageContainer';
52 import NavBar from './components/NavBar'; 52 import NavBar from './components/NavBar';
  53 +import NavBarTitle from './components/home/NavBarTitle';
53 54
54 import { 55 import {
55 setPlatform, 56 setPlatform,
@@ -101,12 +102,6 @@ function getInitialState() { @@ -101,12 +102,6 @@ function getInitialState() {
101 return _initState; 102 return _initState;
102 } 103 }
103 104
104 -  
105 -let titleMarginLeft = Math.ceil(70 * Dimensions.get('window').width / 320);  
106 -let titleWidth = Math.ceil(180 * Dimensions.get('window').width / 320);  
107 -let titleItemWidth = Math.ceil(titleWidth / 3) - 3;  
108 -  
109 -  
110 export default function community(platform) { 105 export default function community(platform) {
111 106
112 let YH_Community = React.createClass({ 107 let YH_Community = React.createClass({
@@ -373,58 +368,8 @@ export default function community(platform) { @@ -373,58 +368,8 @@ export default function community(platform) {
373 }, 368 },
374 369
375 renderHomeTitle(navProps) { 370 renderHomeTitle(navProps) {
376 - let {width, height} = Dimensions.get('window');  
377 -  
378 return ( 371 return (
379 - <Animated.View style={[styles.title,]}>  
380 - <TouchableOpacity onPress={() => {  
381 - ReactNative.NativeModules.YH_CommunityHelper.hideRNNavBar(0);  
382 - }}>  
383 - <Text style={[styles.text, {}]}>逛</Text>  
384 - </TouchableOpacity>  
385 -  
386 - <View style={[{}]}>  
387 - <Text style={[styles.text, {marginLeft: -10.5}]}>社区</Text>  
388 - <Image  
389 - style={{  
390 - position: 'absolute',  
391 - left: titleItemWidth / 2,  
392 - top: -10,  
393 - width: 20,  
394 - height: 10,  
395 - marginLeft: -10  
396 - }}  
397 - resizeMode={'contain'}  
398 - source={require('./images/home/nav_new.png')}  
399 - />  
400 - </View>  
401 -  
402 - <TouchableOpacity onPress={() => {  
403 - ReactNative.NativeModules.YH_CommunityHelper.hideRNNavBar(2);  
404 - }}>  
405 - <Image style={{left: -5.5, top: -0.5}} source={require('./images/home/sd_show_ic.png')}/>  
406 - <Image  
407 - style={{  
408 - position: 'absolute',  
409 - left: titleItemWidth / 2 + 0,  
410 - top: -10,  
411 - width: 20,  
412 - height: 10,  
413 - }}  
414 - resizeMode={'contain'}  
415 - source={require('./images/home/nav_hot.png')}  
416 - />  
417 - </TouchableOpacity>  
418 -  
419 - <View style={{  
420 - backgroundColor: 'white',  
421 - position: 'absolute',  
422 - width: 45,  
423 - height: 2,  
424 - left: (titleWidth - 45) / 2 + 0,  
425 - top: 30,  
426 - }}/>  
427 - </Animated.View> 372 + <NavBarTitle {...navProps}/>
428 ); 373 );
429 }, 374 },
430 375
@@ -513,32 +458,4 @@ let styles = StyleSheet.create({ @@ -513,32 +458,4 @@ let styles = StyleSheet.create({
513 textAlign: 'right', 458 textAlign: 'right',
514 fontSize: 17, 459 fontSize: 17,
515 }, 460 },
516 - title: {  
517 - flexDirection: 'row',  
518 - justifyContent: 'space-between',  
519 - alignItems: 'center',  
520 - width: titleWidth,  
521 - marginTop: 12,  
522 - marginLeft: titleMarginLeft,  
523 - position: 'absolute',  
524 - ...Platform.select({  
525 - ios: {  
526 - top: 20,  
527 - },  
528 - android: {  
529 - top: 5,  
530 - },  
531 - }),  
532 - left: 0,  
533 - right: 0,  
534 - backgroundColor: 'transparent',  
535 - },  
536 - text: {  
537 - textAlign: 'center',  
538 - fontSize: 18,  
539 - fontWeight: 'bold',  
540 - color: '#ffffff',  
541 - width: titleItemWidth,  
542 - marginTop: 1,  
543 - },  
544 }); 461 });
  1 +'use strict';
  2 +
  3 +import React from 'react';
  4 +import ReactNative from 'react-native';
  5 +
  6 +const {
  7 + View,
  8 + Text,
  9 + Image,
  10 + TouchableOpacity,
  11 + StyleSheet,
  12 + Animated,
  13 + Dimensions,
  14 + Platform,
  15 +} = ReactNative;
  16 +
  17 +let {width, height} = Dimensions.get('window');
  18 +let titleMarginLeft = Math.ceil(70 * width / 320);
  19 +let titleWidth = Math.ceil(180 * width / 320);
  20 +let titleItemWidth = Math.ceil(titleWidth / 3) - 3;
  21 +
  22 +export default class NavBarTitle extends React.Component {
  23 +
  24 + constructor(props) {
  25 + super (props);
  26 +
  27 + }
  28 +
  29 + render() {
  30 + let index = this.props.index;
  31 +
  32 + return (
  33 + <Animated.View
  34 + style={[
  35 + styles.title,
  36 + {
  37 + opacity: this.props.position.interpolate({
  38 + inputRange: [index - 1, index, index + 1],
  39 + outputRange: [0, this.props.titleOpacity, 0],
  40 + }),
  41 + left: this.props.position.interpolate({
  42 + inputRange: [index - 1, index + 1],
  43 + outputRange: [200, -200],
  44 + }),
  45 + right: this.props.position.interpolate({
  46 + inputRange: [index - 1, index + 1],
  47 + outputRange: [-200, 200],
  48 + }),
  49 + },
  50 + ]}>
  51 + <TouchableOpacity onPress={() => {
  52 + ReactNative.NativeModules.YH_CommunityHelper.hideRNNavBar(0);
  53 + }}>
  54 + <Text style={[styles.text, {}]}>逛</Text>
  55 + </TouchableOpacity>
  56 +
  57 + <View style={[{}]}>
  58 + <Text style={[styles.text, {marginLeft: -10.5}]}>社区</Text>
  59 + <Image
  60 + style={{
  61 + position: 'absolute',
  62 + left: titleItemWidth / 2,
  63 + top: -10,
  64 + width: 20,
  65 + height: 10,
  66 + marginLeft: -10
  67 + }}
  68 + resizeMode={'contain'}
  69 + source={require('../../images/home/nav_new.png')}
  70 + />
  71 + </View>
  72 +
  73 + <TouchableOpacity onPress={() => {
  74 + ReactNative.NativeModules.YH_CommunityHelper.hideRNNavBar(2);
  75 + }}>
  76 + <Image style={{left: -5.5, top: -0.5}} source={require('../../images/home/sd_show_ic.png')}/>
  77 + <Image
  78 + style={{
  79 + position: 'absolute',
  80 + left: titleItemWidth / 2 + 0,
  81 + top: -10,
  82 + width: 20,
  83 + height: 10,
  84 + }}
  85 + resizeMode={'contain'}
  86 + source={require('../../images/home/nav_hot.png')}
  87 + />
  88 + </TouchableOpacity>
  89 +
  90 + <View style={{
  91 + backgroundColor: 'white',
  92 + position: 'absolute',
  93 + width: 45,
  94 + height: 2,
  95 + left: (titleWidth - 45) / 2 + 0,
  96 + top: 30,
  97 + }}/>
  98 + </Animated.View>
  99 + );
  100 + }
  101 +}
  102 +
  103 +let styles = StyleSheet.create({
  104 + title: {
  105 + flexDirection: 'row',
  106 + justifyContent: 'space-between',
  107 + alignItems: 'center',
  108 + width: titleWidth,
  109 + marginTop: 12,
  110 + marginLeft: titleMarginLeft,
  111 + position: 'absolute',
  112 + ...Platform.select({
  113 + ios: {
  114 + top: 20,
  115 + },
  116 + android: {
  117 + top: 5,
  118 + },
  119 + }),
  120 + left: 0,
  121 + right: 0,
  122 + backgroundColor: 'transparent',
  123 + },
  124 + text: {
  125 + textAlign: 'center',
  126 + fontSize: 18,
  127 + fontWeight: 'bold',
  128 + color: '#ffffff',
  129 + width: titleItemWidth,
  130 + marginTop: 1,
  131 + },
  132 +});
@@ -24,6 +24,7 @@ @@ -24,6 +24,7 @@
24 "react-native-simple-store": "^1.0.1", 24 "react-native-simple-store": "^1.0.1",
25 "react-native-swiper": "^1.4.7", 25 "react-native-swiper": "^1.4.7",
26 "react-redux": "^4.4.5", 26 "react-redux": "^4.4.5",
  27 + "react-timer-mixin": "^0.13.3",
27 "redux": "^3.5.2", 28 "redux": "^3.5.2",
28 "redux-logger": "^2.6.1", 29 "redux-logger": "^2.6.1",
29 "redux-thunk": "^2.0.1", 30 "redux-thunk": "^2.0.1",