Skip to content

Commit 9bb3228

Browse files
author
soliury
committed
ScrollableTab for android ci
1 parent 0598697 commit 9bb3228

9 files changed

Lines changed: 214 additions & 93 deletions

File tree

‎android/app/build.gradle‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -117,5 +117,5 @@ dependencies {
117117
compile project(':react-native-vector-icons')
118118
compile fileTree(dir: "libs", include: ["*.jar"])
119119
compile "com.android.support:appcompat-v7:23.0.1"
120-
compile "com.facebook.react:react-native:0.19.0"
120+
compile "com.facebook.react:react-native:0.20.+"
121121
}

‎ios/noder/AppDelegate.m‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(
3131
* on the same Wi-Fi network.
3232
*/
3333

34-
jsCodeLocation = [NSURL URLWithString:@"http://192.168.31.142:8081/index.ios.bundle?platform=ios&dev=true"];
34+
jsCodeLocation = [NSURL URLWithString:@"http://172.28.162.87:8081/index.ios.bundle?platform=ios&dev=true"];
3535

3636
/**
3737
* OPTION 2

‎src/components/ScrollableTabs.js‎

Lines changed: 59 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ class ScrollableTabs extends Component {
3131
constructor(props) {
3232
super(props);
3333
const { tabNavItemWidth, tabs } = props;
34+
this.tabCount = tabs.length;
3435
this.space = (width - tabNavItemWidth * 3) / 2;
3536
this.navContentWidth = (tabs.length + 2) * tabNavItemWidth + this.space * (tabs.length + 1);
3637
this.index = props.index || Math.floor(tabs.length / 2);
@@ -86,6 +87,53 @@ class ScrollableTabs extends Component {
8687
}
8788

8889

90+
_onTouchStart(e) {
91+
console.log('start');
92+
this.touchstart = e.nativeEvent.pageX;
93+
this.touchstartTimestamp = e.nativeEvent.timeStamp;
94+
}
95+
96+
97+
_onTouchMove(e) {
98+
console.log('move');
99+
}
100+
101+
102+
_onTouchEnd(e) {
103+
console.log('end');
104+
const { pageX, timeStamp } = e.nativeEvent;
105+
const distance = pageX - this.touchstart;
106+
const time = timeStamp - this.touchstartTimestamp;
107+
const v = distance / time;
108+
let x;
109+
if (Math.abs(distance) > this.space) {
110+
// swipe to right
111+
if (v < 0) {
112+
if (this.index > 0 || this.index < this.tabCount - 1) {
113+
this.index++;
114+
}
115+
x = this.index * width;
116+
}
117+
else {
118+
if (this.index > 0 || this.index < this.tabCount - 1) {
119+
this.index--;
120+
}
121+
this.index--;
122+
x = this.index * width;
123+
}
124+
}
125+
else {
126+
x = this.index * width;
127+
}
128+
129+
this.scrollView.scrollTo({
130+
x,
131+
y: 0,
132+
animated: true
133+
});
134+
}
135+
136+
89137
_getActiveNavItemStyle(opacity) {
90138
return {
91139
borderTopColor: 'rgba(241,196,15,' + opacity + ')'
@@ -102,7 +150,7 @@ class ScrollableTabs extends Component {
102150

103151
return (
104152
<View ref={ view => this._navs[index]=view} key={index}
105-
style={[styles.navItem, { width: this.props.tabNavItemWidth }, activeStyle]}>
153+
style={[styles.navItem, { width: this.props.tabNavItemWidth }, activeStyle]}>
106154
<TouchableOpacity>
107155
<Text style={styles.itemText}>
108156
{ item }
@@ -115,6 +163,13 @@ class ScrollableTabs extends Component {
115163

116164

117165
render() {
166+
const androidProps = Platform.OS === 'android' ? {
167+
onTouchStart: this._onTouchStart.bind(this),
168+
onTouchEnd: this._onTouchEnd.bind(this),
169+
onTouchMove: this._onTouchMove.bind(this)
170+
} : {};
171+
172+
118173
return (
119174
<View style={[ styles.container, this.props.style ]}>
120175
<View style={[styles.navWrapper, { width: this.navContentWidth }]}>
@@ -143,14 +198,15 @@ class ScrollableTabs extends Component {
143198
bounces={true}
144199
horizontal={true}
145200
directionalLockEnabled={true}
146-
scrollEventThrottle={1}
201+
scrollEventThrottle={16}
147202
pagingEnabled={true}
148203
scrollEnabled={true}
149204
onScroll={this._onScroll.bind(this)}
150205
automaticallyAdjustContentInsets={false}
151206
removeClippedSubviews={true}
152207
showsHorizontalScrollIndicator={false}
153-
showsVerticalScrollIndicator={false}>
208+
showsVerticalScrollIndicator={false}
209+
{...androidProps}>
154210

155211
{this.props.children.map((pageContent, index)=> {
156212
return (

‎src/components/TabBar.js‎

Lines changed: 102 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,107 @@
1-
'use strict';
2-
3-
var React = require('react-native');
4-
var {
5-
StyleSheet,
6-
Text,
7-
TouchableOpacity,
8-
View,
9-
Animated,
10-
} = React;
11-
12-
var deviceWidth = require('Dimensions').get('window').width;
13-
14-
15-
var underLineColor = '#3498DB'
16-
var activeTabTextColor = 'rgba(0,0,0,9)'
17-
var normalTabTextColor = 'rgba(0,0,0,0.4)'
18-
19-
var styles = StyleSheet.create({
20-
tab: {
21-
flex: 1,
22-
alignItems: 'center',
23-
justifyContent: 'center',
24-
paddingBottom: 10,
25-
paddingTop: 10
26-
},
27-
28-
tabs: {
29-
height: 50 + 4,
30-
flexDirection: 'row',
31-
marginTop: 0,
32-
borderWidth: 1,
33-
borderTopWidth: 0,
34-
borderLeftWidth: 0,
35-
borderRightWidth: 0,
36-
borderBottomColor: 'rgba(0,0,0,0.06)',
37-
justifyContent: 'space-around'
38-
},
39-
});
1+
import React, {
2+
StyleSheet,
3+
Text,
4+
TouchableOpacity,
5+
View,
6+
Dimensions,
7+
Component,
8+
PropTypes,
9+
Animated
10+
} from 'react-native';
11+
12+
13+
const { width } = Dimensions.get('window');
14+
const underLineColor = '#3498DB';
15+
const activeTabTextColor = 'rgba(0,0,0,9)';
16+
const normalTabTextColor = 'rgba(0,0,0,0.4)';
17+
18+
class TabBar extends Component {
19+
static propTypes = {
20+
goToPage: PropTypes.func,
21+
activeTab: PropTypes.number,
22+
tabs: PropTypes.array,
23+
tabStyle: PropTypes.object,
24+
tabTextStyle: PropTypes.object,
25+
activeTabTextColor: PropTypes.string,
26+
normalTabTextColor: PropTypes.string
27+
};
28+
29+
30+
static defaultProps = {
31+
activeTabTextColor,
32+
normalTabTextColor
33+
};
34+
35+
36+
constructor(props) {
37+
super(props);
38+
}
39+
40+
41+
renderTabOption(name, page) {
42+
const isTabActive = this.props.activeTab === page;
43+
const textStyle = {
44+
color: isTabActive ? this.props.activeTabTextColor : this.props.normalTabTextColor,
45+
fontWeight: isTabActive ? 'bold' : 'normal'
46+
};
47+
48+
return (
49+
<TouchableOpacity key={name} onPress={() => this.props.goToPage(page)}>
50+
<View style={[styles.tab, this.props.tabStyle]}>
51+
<Text style={[ textStyle, this.props.tabTextStyle ]}>
52+
{ name }
53+
</Text>
54+
</View>
55+
</TouchableOpacity>
56+
);
57+
}
58+
59+
60+
render() {
61+
var numberOfTabs = this.props.tabs.length;
62+
var tabUnderlineStyle = {
63+
position: 'absolute',
64+
width: width / numberOfTabs,
65+
height: 4,
66+
backgroundColor: underLineColor,
67+
bottom: 0
68+
};
69+
70+
var left = this.props.scrollValue.interpolate({
71+
inputRange: [0, 1], outputRange: [0, width / numberOfTabs]
72+
});
73+
74+
return (
75+
<View style={[ styles.tabs, this.props.style]}>
76+
{this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
77+
<Animated.View style={[tabUnderlineStyle, this.props.tabUnderlineStyle, {left}]}/>
78+
</View>
79+
);
80+
}
81+
}
82+
4083

84+
const styles = StyleSheet.create({
85+
tab: {
86+
flex: 1,
87+
alignItems: 'center',
88+
justifyContent: 'center',
89+
paddingBottom: 10,
90+
paddingTop: 10
91+
},
4192

42-
var DefaultTabBar = React.createClass({
43-
propTypes: {
44-
goToPage: React.PropTypes.func,
45-
activeTab: React.PropTypes.number,
46-
tabs: React.PropTypes.array
47-
},
48-
49-
renderTabOption(name, page) {
50-
var isTabActive = this.props.activeTab === page;
51-
52-
return (
53-
<TouchableOpacity key={name} onPress={() => this.props.goToPage(page)}>
54-
<View style={[styles.tab]}>
55-
<Text
56-
style={{color: isTabActive ? activeTabTextColor : normalTabTextColor, fontWeight: isTabActive ? 'bold' : 'normal'}}>{name}</Text>
57-
</View>
58-
</TouchableOpacity>
59-
);
60-
},
61-
62-
render() {
63-
var numberOfTabs = this.props.tabs.length;
64-
var tabUnderlineStyle = {
65-
position: 'absolute',
66-
width: deviceWidth / numberOfTabs,
67-
height: 4,
68-
backgroundColor: underLineColor,
69-
bottom: 0,
70-
};
71-
72-
var left = this.props.scrollValue.interpolate({
73-
inputRange: [0, 1], outputRange: [0, deviceWidth / numberOfTabs]
74-
});
75-
76-
return (
77-
<View style={styles.tabs}>
78-
{this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
79-
<Animated.View style={[tabUnderlineStyle, {left}]}/>
80-
</View>
81-
);
82-
},
93+
tabs: {
94+
height: 50 + 4,
95+
flexDirection: 'row',
96+
marginTop: 0,
97+
borderWidth: 1,
98+
borderTopWidth: 0,
99+
borderLeftWidth: 0,
100+
borderRightWidth: 0,
101+
borderBottomColor: 'rgba(0,0,0,0.06)',
102+
justifyContent: 'space-around'
103+
}
83104
});
84105

85-
module.exports = DefaultTabBar;
86106

107+
export default TabBar;

‎src/components/TopicList.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ class TopicList extends Component {
4747
}
4848
}
4949

50+
_onScroll(e) {
51+
52+
}
53+
5054

5155
_renderTopicFooter(topic) {
5256
var renderArr = [];
@@ -118,20 +122,27 @@ class TopicList extends Component {
118122
render() {
119123
return (
120124
<ListView
125+
style={styles.container}
121126
ref={view => {this._listView = view}}
122127
showsVerticalScrollIndicator={true}
123128
initialListSize={10}
124129
pagingEnabled={false}
125130
removeClippedSubviews={true}
126131
dataSource={this.state.ds}
127132
renderRow={this.renderRow.bind(this)}
128-
scrollRenderAheadDistance={90}/>
133+
scrollRenderAheadDistance={90}
134+
onScroll={this._onScroll.bind(this)}
135+
/>
129136
)
130137
}
131138
}
132139

133140

134141
const styles = StyleSheet.create({
142+
container: {
143+
width,
144+
height: height
145+
},
135146
"row": {
136147
"height": 90,
137148
"flexDirection": "row",

‎src/layouts/Home.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ import React,{
66
StyleSheet,
77
Dimensions,
88
Animated,
9-
Easing
9+
Easing,
10+
StatusBar
1011
} from 'react-native';
1112
import UserOverlay from '../components/UserOverlay';
1213
import MessageOverlay from '../components/MessageOverlay';
@@ -24,6 +25,13 @@ class Home extends Component {
2425
}
2526

2627

28+
componentDidMount() {
29+
['good', 'ask', 'all', 'share', 'job'].map((item)=> {
30+
this.props.actions.getTopicsByTab(item);
31+
});
32+
}
33+
34+
2735
_renderTopicList() {
2836
return ['good', 'ask', 'all', 'share', 'job'].map((item)=> {
2937
return <TopicList key={item} nav={item} data={this.props.topic[item]}/>
@@ -35,6 +43,7 @@ class Home extends Component {
3543
const { router, user, message } = this.props;
3644
return (
3745
<View style={styles.container}>
46+
<StatusBar barStyle="light-content"/>
3847
<ScrollableTabs index={0} tabs={['精华', '问答', '主页', '分享', '招聘']}>
3948
{ this._renderTopicList() }
4049
</ScrollableTabs>

0 commit comments

Comments
 (0)