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';
import LikeListContainer from './containers/LikeListContainer';
import SystemMessageContainer from './containers/SystemMessageContainer';
import NavBar from './components/NavBar';
import NavBarTitle from './components/home/NavBarTitle';
import {
setPlatform,
... ... @@ -101,12 +102,6 @@ function getInitialState() {
return _initState;
}
let titleMarginLeft = Math.ceil(70 * Dimensions.get('window').width / 320);
let titleWidth = Math.ceil(180 * Dimensions.get('window').width / 320);
let titleItemWidth = Math.ceil(titleWidth / 3) - 3;
export default function community(platform) {
let YH_Community = React.createClass({
... ... @@ -373,58 +368,8 @@ export default function community(platform) {
},
renderHomeTitle(navProps) {
let {width, height} = Dimensions.get('window');
return (
<Animated.View style={[styles.title,]}>
<TouchableOpacity onPress={() => {
ReactNative.NativeModules.YH_CommunityHelper.hideRNNavBar(0);
}}>
<Text style={[styles.text, {}]}>逛</Text>
</TouchableOpacity>
<View style={[{}]}>
<Text style={[styles.text, {marginLeft: -10.5}]}>社区</Text>
<Image
style={{
position: 'absolute',
left: titleItemWidth / 2,
top: -10,
width: 20,
height: 10,
marginLeft: -10
}}
resizeMode={'contain'}
source={require('./images/home/nav_new.png')}
/>
</View>
<TouchableOpacity onPress={() => {
ReactNative.NativeModules.YH_CommunityHelper.hideRNNavBar(2);
}}>
<Image style={{left: -5.5, top: -0.5}} source={require('./images/home/sd_show_ic.png')}/>
<Image
style={{
position: 'absolute',
left: titleItemWidth / 2 + 0,
top: -10,
width: 20,
height: 10,
}}
resizeMode={'contain'}
source={require('./images/home/nav_hot.png')}
/>
</TouchableOpacity>
<View style={{
backgroundColor: 'white',
position: 'absolute',
width: 45,
height: 2,
left: (titleWidth - 45) / 2 + 0,
top: 30,
}}/>
</Animated.View>
<NavBarTitle {...navProps}/>
);
},
... ... @@ -513,32 +458,4 @@ let styles = StyleSheet.create({
textAlign: 'right',
fontSize: 17,
},
title: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: titleWidth,
marginTop: 12,
marginLeft: titleMarginLeft,
position: 'absolute',
...Platform.select({
ios: {
top: 20,
},
android: {
top: 5,
},
}),
left: 0,
right: 0,
backgroundColor: 'transparent',
},
text: {
textAlign: 'center',
fontSize: 18,
fontWeight: 'bold',
color: '#ffffff',
width: titleItemWidth,
marginTop: 1,
},
});
... ...
'use strict';
import React from 'react';
import ReactNative from 'react-native';
const {
View,
Text,
Image,
TouchableOpacity,
StyleSheet,
Animated,
Dimensions,
Platform,
} = ReactNative;
let {width, height} = Dimensions.get('window');
let titleMarginLeft = Math.ceil(70 * width / 320);
let titleWidth = Math.ceil(180 * width / 320);
let titleItemWidth = Math.ceil(titleWidth / 3) - 3;
export default class NavBarTitle extends React.Component {
constructor(props) {
super (props);
}
render() {
let index = this.props.index;
return (
<Animated.View
style={[
styles.title,
{
opacity: this.props.position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [0, this.props.titleOpacity, 0],
}),
left: this.props.position.interpolate({
inputRange: [index - 1, index + 1],
outputRange: [200, -200],
}),
right: this.props.position.interpolate({
inputRange: [index - 1, index + 1],
outputRange: [-200, 200],
}),
},
]}>
<TouchableOpacity onPress={() => {
ReactNative.NativeModules.YH_CommunityHelper.hideRNNavBar(0);
}}>
<Text style={[styles.text, {}]}>逛</Text>
</TouchableOpacity>
<View style={[{}]}>
<Text style={[styles.text, {marginLeft: -10.5}]}>社区</Text>
<Image
style={{
position: 'absolute',
left: titleItemWidth / 2,
top: -10,
width: 20,
height: 10,
marginLeft: -10
}}
resizeMode={'contain'}
source={require('../../images/home/nav_new.png')}
/>
</View>
<TouchableOpacity onPress={() => {
ReactNative.NativeModules.YH_CommunityHelper.hideRNNavBar(2);
}}>
<Image style={{left: -5.5, top: -0.5}} source={require('../../images/home/sd_show_ic.png')}/>
<Image
style={{
position: 'absolute',
left: titleItemWidth / 2 + 0,
top: -10,
width: 20,
height: 10,
}}
resizeMode={'contain'}
source={require('../../images/home/nav_hot.png')}
/>
</TouchableOpacity>
<View style={{
backgroundColor: 'white',
position: 'absolute',
width: 45,
height: 2,
left: (titleWidth - 45) / 2 + 0,
top: 30,
}}/>
</Animated.View>
);
}
}
let styles = StyleSheet.create({
title: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
width: titleWidth,
marginTop: 12,
marginLeft: titleMarginLeft,
position: 'absolute',
...Platform.select({
ios: {
top: 20,
},
android: {
top: 5,
},
}),
left: 0,
right: 0,
backgroundColor: 'transparent',
},
text: {
textAlign: 'center',
fontSize: 18,
fontWeight: 'bold',
color: '#ffffff',
width: titleItemWidth,
marginTop: 1,
},
});
... ...
... ... @@ -24,6 +24,7 @@
"react-native-simple-store": "^1.0.1",
"react-native-swiper": "^1.4.7",
"react-redux": "^4.4.5",
"react-timer-mixin": "^0.13.3",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.0.1",
... ...