Skip to content
This repository was archived by the owner on Nov 12, 2019. It is now read-only.

Commit 91cfc7a

Browse files
wangdicoderwangdicoder
committed
girl page
1 parent ea2d1b9 commit 91cfc7a

File tree

9 files changed

+197
-99
lines changed

9 files changed

+197
-99
lines changed

‎js/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import React from 'react';
88
import {Navigator} from 'react-native';
99
import {store} from './store/index';
1010
import MainPage from './containers/MainPage';
11-
import Test from './containers/WebViewPage'
11+
import Test from './containers/MoreTab/GirlsPage'
1212

1313
export default class App extends React.Component{
1414
render(){

‎js/containers/DiscoveryTab/ImageTabPage.js‎

Lines changed: 0 additions & 65 deletions
This file was deleted.

js/containers/DiscoveryTab/TextTabPage.js renamed to js/containers/DiscoveryTab/TextListPage.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import NavigationBar from '../../components/NavigationBar';
1414
import BackPageComponent from '../../components/BackPageComponent';
1515
import ListViewWithInfo from '../../components/ListViewWithInfo';
1616

17-
class TextTabPage extends BackPageComponent{
17+
class TextListPage extends BackPageComponent{
1818
constructor(props){
1919
super(props);
2020
}
@@ -120,5 +120,5 @@ const mapDispatchToProps = (dispatch) => {
120120
};
121121
};
122122

123-
export default connect(mapStateToProps, mapDispatchToProps)(TextTabPage);
123+
export default connect(mapStateToProps, mapDispatchToProps)(TextListPage);
124124

‎js/containers/DiscoveryTab/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {connect} from 'react-redux';
99
import {bindActionCreators} from 'redux';
1010
import * as Actions from '../../actions/requestRandomData';
1111
import Icon from 'react-native-vector-icons/Ionicons';
12-
import TextTabPage from './TextTabPage';
12+
import TextListPage from './TextListPage';
1313
import theme from '../../constants/theme';
1414
import NavigationBar from '../../components/NavigationBar';
1515
import px2dp from '../../utils/px2dp';
@@ -196,7 +196,7 @@ class DiscoveryFragment extends Component{
196196
}
197197

198198
_itemPressCallback(title){
199-
this._pushScene(TextTabPage, title);
199+
this._pushScene(TextListPage, title);
200200
}
201201

202202
_pushScene(component, title){

‎js/containers/MoreTab/AboutAuthor/index.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ import {StyleSheet, View, Text} from 'react-native';
66
import BackPageComponent from '../../../components/BackPageComponent';
77
import NavigationBar from '../../../components/NavigationBar';
88
import theme from '../../../constants/theme';
9+
import {connect} from 'react-redux';
910

10-
export default class AboutAuthorPage extends BackPageComponent{
11+
class AboutAuthorPage extends BackPageComponent{
1112

1213
render(){
14+
const {pageBackgroundColor} = this.props;
1315
return(
14-
<View style={styles.container}>
16+
<View style={[styles.container, {backgroundColor: pageBackgroundColor}]}>
1517
<NavigationBar
1618
title="关于作者"
1719
leftBtnIcon="arrow-back"
@@ -24,7 +26,18 @@ export default class AboutAuthorPage extends BackPageComponent{
2426
const styles = StyleSheet.create({
2527
container: {
2628
flex: 1,
27-
backgroundColor: theme.pageBackgroundColor,
2829
paddingTop: theme.toolbar.paddingTop
2930
}
30-
});
31+
});
32+
33+
const mapStateToProps = (state) => {
34+
return {
35+
displayOrder: state.settingState.displayOrder,
36+
pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
37+
segmentColor: state.settingState.colorScheme.segmentColor,
38+
titleColor: state.settingState.colorScheme.titleColor,
39+
rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor
40+
}
41+
}
42+
43+
export default connect(mapStateToProps)(AboutAuthorPage);

‎js/containers/MoreTab/AboutGankPage.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,14 @@ import {StyleSheet, View, Text} from 'react-native';
66
import BackPageComponent from '../../components/BackPageComponent';
77
import NavigationBar from '../../components/NavigationBar';
88
import theme from '../../constants/theme';
9+
import {connect} from 'react-redux';
910

10-
export default class AboutGankPage extends BackPageComponent{
11+
class AboutGankPage extends BackPageComponent{
1112

1213
render(){
14+
const {pageBackgroundColor} = this.props;
1315
return(
14-
<View style={styles.container}>
16+
<View style={[styles.container, {backgroundColor: pageBackgroundColor}]}>
1517
<NavigationBar
1618
title="关于Gank.io"
1719
leftBtnIcon="arrow-back"
@@ -24,7 +26,18 @@ export default class AboutGankPage extends BackPageComponent{
2426
const styles = StyleSheet.create({
2527
container: {
2628
flex: 1,
27-
backgroundColor: theme.pageBackgroundColor,
2829
paddingTop: theme.toolbar.paddingTop
2930
}
30-
});
31+
});
32+
33+
const mapStateToProps = (state) => {
34+
return {
35+
displayOrder: state.settingState.displayOrder,
36+
pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
37+
segmentColor: state.settingState.colorScheme.segmentColor,
38+
titleColor: state.settingState.colorScheme.titleColor,
39+
rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor
40+
}
41+
}
42+
43+
export default connect(mapStateToProps)(AboutGankPage);

‎js/containers/MoreTab/GirlsPage.js‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/**
2+
* Created by wangdi on 23/11/16.
3+
* 福利数据页面
4+
*/
5+
'use strict';
6+
7+
import React, {Component} from 'react';
8+
import {StyleSheet, InteractionManager, View, Text, ScrollView, Image, ListView, ToastAndroid} from 'react-native';
9+
import theme from '../../constants/theme';
10+
import NavigationBar from '../../components/NavigationBar';
11+
import BackPageComponent from '../../components/BackPageComponent';
12+
import {connect} from 'react-redux';
13+
14+
class GirlsPage extends BackPageComponent{
15+
constructor(props){
16+
super(props);
17+
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
18+
this.state = {
19+
dataSource: ds,
20+
dataBlob1: [],
21+
dataBlob2: [],
22+
imageHeight: 200,
23+
};
24+
this.flag = true;
25+
}
26+
27+
render(){
28+
const {pageBackgroundColor} = this.props;
29+
return(
30+
<View style={[styles.container, {backgroundColor: pageBackgroundColor}]}>
31+
<View style={styles.toolbar}>
32+
<NavigationBar
33+
title="福利"
34+
isBackBtnOnLeft={true}
35+
leftBtnIcon="arrow-back"
36+
leftBtnPress={this._handleBack.bind(this)}/>
37+
</View>
38+
39+
<View style={{flexDirection: 'row'}}>
40+
<ListView
41+
ref={(ref)=> this.listView1 = ref}
42+
renderRow={this._renderRow.bind(this)}
43+
enableEmptySections={true}
44+
dataSource={this.state.dataSource.cloneWithRows(this.state.dataBlob1)}
45+
onScroll={this._onScroll.bind(this)}
46+
//scrollEventThrottle={200}
47+
onScrollBeginDrag={() => this.flag = true}
48+
showsVerticalScrollIndicator={false}
49+
onEndReached={()=>ToastAndroid.show('end', ToastAndroid.SHORT)}
50+
onEndReachedThreshold={5}
51+
/>
52+
<ListView
53+
ref={(ref)=> this.listView2 = ref}
54+
renderRow={this._renderRow.bind(this)}
55+
enableEmptySections={true}
56+
dataSource={this.state.dataSource.cloneWithRows(this.state.dataBlob2)}
57+
onScroll={this._onScroll.bind(this)}
58+
scrollEventThrottle={200}
59+
onScrollBeginDrag={() => this.flag = false}
60+
onEndReached={()=>ToastAndroid.show('end', ToastAndroid.SHORT)}
61+
onEndReachedThreshold={5}
62+
/>
63+
</View>
64+
</View>
65+
);
66+
}
67+
68+
_onScroll(event){
69+
var offsetY = event.nativeEvent.contentOffset.y;
70+
if(this.flag)
71+
this.listView2.scrollTo({y: offsetY, animated: false});
72+
else
73+
this.listView1.scrollTo({y: offsetY, animated: false});
74+
}
75+
76+
_renderRow(rowData) {
77+
return (
78+
<View>
79+
<Image style={{width: theme.screenWidth/2, height: this._randomHeight()}}
80+
source={{uri: this._handleImageToSmallSize(rowData.url)}}/>
81+
</View>
82+
);
83+
}
84+
85+
componentDidMount(){
86+
InteractionManager.runAfterInteractions(()=>{
87+
fetch('http://gank.io/api/data/%E7%A6%8F%E5%88%A9/20/1').then(response => response.json())
88+
.then(json => {
89+
this.setState({
90+
dataBlob1: json.results.slice(0,10),
91+
dataBlob2: json.results.slice(10)
92+
});
93+
});
94+
});
95+
}
96+
97+
_randomHeight(){
98+
return Math.floor((Math.random() * 100) + 150);
99+
}
100+
101+
_handleImageToSmallSize(url){
102+
return url.replace('large','small');
103+
}
104+
}
105+
106+
const styles = StyleSheet.create({
107+
container: {
108+
flex: 1,
109+
paddingTop: theme.toolbar.paddingTop
110+
},
111+
toolbar: {
112+
position: 'absolute',
113+
width: theme.screenWidth,
114+
zIndex: 1
115+
},
116+
img1: {
117+
width: theme.screenWidth/2,
118+
height: 200
119+
},
120+
img2: {
121+
width: theme.screenWidth/2,
122+
height: 170
123+
}
124+
});
125+
126+
const mapStateToProps = (state) => {
127+
return {
128+
displayOrder: state.settingState.displayOrder,
129+
pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
130+
segmentColor: state.settingState.colorScheme.segmentColor,
131+
titleColor: state.settingState.colorScheme.titleColor,
132+
rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor
133+
}
134+
}
135+
136+
export default connect(mapStateToProps)(GirlsPage);

‎js/containers/MoreTab/OrderContentPage.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ class OrderContentPage extends BackPageComponent{
2828
}
2929

3030
render(){
31+
const {pageBackgroundColor, rowItemBackgroundColor, segmentColor, titleColor} = this.props;
3132
return(
32-
<View style={styles.container}>
33+
<View style={[styles.container, {backgroundColor: pageBackgroundColor}]}>
3334
<NavigationBar
3435
title="首页内容展示顺序"
3536
leftBtnText="取消"
@@ -44,9 +45,9 @@ class OrderContentPage extends BackPageComponent{
4445
{...this._panResponder.panHandlers}
4546
ref={(ref) => this.items[i] = ref}
4647
key={i}
47-
style={[styles.item, {top: this._getTopValueYById(i)}]}>
48+
style={[styles.item, {top: this._getTopValueYById(i), backgroundColor: rowItemBackgroundColor, borderBottomColor: segmentColor}]}>
4849
<Icon name="ios-menu" size={px2dp(25)} color="#ccc"/>
49-
<Text style={styles.itemTitle}>{item}</Text>
50+
<Text style={[styles.itemTitle, {color: titleColor}]}>{item}</Text>
5051
</View>
5152
);
5253
})}
@@ -146,30 +147,30 @@ class OrderContentPage extends BackPageComponent{
146147
const styles = StyleSheet.create({
147148
container: {
148149
flex: 1,
149-
backgroundColor: theme.pageBackgroundColor,
150150
paddingTop: theme.toolbar.paddingTop,
151151
},
152152
item: {
153153
flexDirection: 'row',
154154
height: px2dp(49),
155155
width: theme.screenWidth,
156156
alignItems: 'center',
157-
backgroundColor: '#fff',
158157
paddingLeft: px2dp(20),
159-
borderBottomColor: theme.segment.color,
160158
borderBottomWidth: theme.segment.width,
161159
position: 'absolute',
162160
},
163161
itemTitle: {
164162
fontSize: px2dp(15),
165-
color: '#000',
166163
marginLeft: px2dp(20)
167164
}
168165
});
169166

170167
const mapStateToProps = (state) => {
171168
return {
172-
displayOrder: state.settingState.displayOrder
169+
displayOrder: state.settingState.displayOrder,
170+
pageBackgroundColor: state.settingState.colorScheme.pageBackgroundColor,
171+
segmentColor: state.settingState.colorScheme.segmentColor,
172+
titleColor: state.settingState.colorScheme.titleColor,
173+
rowItemBackgroundColor: state.settingState.colorScheme.rowItemBackgroundColor
173174
}
174175
}
175176

0 commit comments

Comments
 (0)