Skip to content

Commit ea14fd8

Browse files
qddegtyaqddegtya
committed
🇨🇳 拆分TopicCard;修复icon.uri;获取TopicCard
1 parent 3722049 commit ea14fd8

File tree

8 files changed

+251
-253
lines changed

8 files changed

+251
-253
lines changed

‎components/a-AppMain.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ var AppNavBar = React.createClass({
4848
>
4949
<TabBarIOS.Item
5050
title="帖子"
51-
icon={{uri: require('image!iconfont-zuijinfabu')}}
51+
icon={require('image!iconfont-zuijinfabu')}
5252
selected={this.state.selectedTab === 'indexTab'}
5353
onPress={() => {
5454
this.setState({
@@ -64,7 +64,7 @@ var AppNavBar = React.createClass({
6464
</TabBarIOS.Item>
6565
<TabBarIOS.Item
6666
title="标签"
67-
icon={{uri: require('image!iconfont-jinghua')}}
67+
icon={require('image!iconfont-jinghua')}
6868
selected={this.state.selectedTab === 'niceTab'}
6969
onPress={() => {
7070
this.setState({
@@ -78,7 +78,7 @@ var AppNavBar = React.createClass({
7878
</TabBarIOS.Item>
7979
<TabBarIOS.Item
8080
title="动态"
81-
icon={{uri: require('image!iconfont-hot')}}
81+
icon={require('image!iconfont-hot')}
8282
selected={this.state.selectedTab === 'hotTab'}
8383
onPress={() => {
8484
this.setState({
@@ -94,7 +94,7 @@ var AppNavBar = React.createClass({
9494
</TabBarIOS.Item>
9595
<TabBarIOS.Item
9696
title="我的"
97-
icon={{uri: require('image!iconfont-shafa')}}
97+
icon={require('image!iconfont-shafa')}
9898
selected={this.state.selectedTab === 'needComment'}
9999
onPress={() => {
100100
this.setState({

‎components/a-TopicCard.js

+12-188
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,28 @@
11
'use strict';
22

33
var React = require('react-native');
4-
var superagent = require('superagent');
5-
var RefreshableListView = require('react-native-refreshable-listview');
6-
var apilist = require('../apilist');
4+
var styles = require('./a-TopicStyle');
75

86
var {
9-
StyleSheet,
107
Text,
118
View,
12-
ListView,
139
Image,
14-
ActivityIndicatorIOS,
1510
TouchableOpacity
1611
} = React;
1712

1813

1914
var TopicCard = React.createClass({
2015
getInitialState() {
2116
return {
22-
dataSource: new ListView.DataSource({
23-
rowHasChanged: (row1, row2) => row1 !== row2
24-
}),
25-
loaded: false,
26-
currentOffset: 0
17+
cardId: this.props.cardId,
18+
topicItem: this.props.topicItem
2719
};
2820
},
2921

3022
componentDidMount() {
31-
this.fetchTopicsData();
23+
3224
},
33-
25+
3426
_avatarFilter(topic) {
3527
let avatar = topic.user &&
3628
topic.user.avatar_url &&
@@ -73,96 +65,34 @@ var TopicCard = React.createClass({
7365
return num.toString();
7466
}
7567
},
76-
77-
_loadMore() {
78-
this.fetchTopicsData(
79-
apilist.fetchResourceWithPage(
80-
apilist[this.props.currentReqName],
81-
this.state.currentOffset + 20
82-
),
83-
20
84-
);
85-
},
86-
87-
_reload() {
88-
this.fetchTopicsData(
89-
apilist.fetchResourceWithPage(
90-
apilist[this.props.currentReqName]
91-
)
92-
);
93-
},
9468

9569
_onPressTopicItem() {
96-
// 详情页
97-
console.log(this.refs.INDEX_NAV);
98-
},
99-
100-
fetchTopicsData(api=this.props.resourceApi, more=0) {
101-
superagent.get(api)
102-
.set('Accept', 'application/json')
103-
.end((err, res) => {
104-
this.setState({
105-
dataSource: this.state.dataSource.cloneWithRows(res.body.topics),
106-
loaded: true,
107-
currentOffset: this.state.currentOffset + more
108-
});
109-
});
70+
console.log(this.state.cardId);
11071
},
11172

11273
render() {
113-
return (
114-
!this.state.loaded ?
115-
<View style={ styles.loading }>
116-
<ActivityIndicatorIOS
117-
size="small"
118-
color="#333333"
119-
/>
120-
<Text style={styles.loadingTip}>加载中...</Text>
121-
</View> :
122-
<RefreshableListView
123-
initialListSize={20}
124-
pageSize={20}
125-
onEndReached={this._loadMore}
126-
dataSource={this.state.dataSource}
127-
renderRow={this.renderTopicItem}
128-
style={styles.topicListView}
129-
removeClippedSubviews={true}
130-
onEndReachedThreshold={0}
131-
loadData={this._reload}
132-
refreshDescription='正在刷新...'
133-
refreshingIndictatorComponent={
134-
<RefreshableListView.RefreshingIndicator stylesheet={indicatorStylesheet} />
135-
}
136-
minDisplayTime={500}
137-
minPulldownDistance={80}
138-
minBetweenTime={2000}
139-
/>
140-
);
141-
},
142-
143-
renderTopicItem(topic) {
14474
return (
14575
<TouchableOpacity onPress={this._onPressTopicItem} activeOpacity={0.8}>
14676
<View style={styles.topicCard}>
14777
<View style={styles.avatar}>
14878
<Image
14979
style={styles.avatarImg}
150-
source={{uri:this._avatarFilter(topic)}}
80+
source={{uri:this._avatarFilter(this.state.topicItem)}}
15181
resizeMode='cover'
15282
/>
15383
</View>
15484

15585
<View style={styles.titleMeta}>
156-
<Text style={styles.topicTitle}>{topic.title}</Text>
86+
<Text style={styles.topicTitle}>{this.state.topicItem.title}</Text>
15787
<View style={styles.metaarea}>
158-
<Text style={styles.metainfo}>{this._checkUser(topic)}</Text>
88+
<Text style={styles.metainfo}>{this._checkUser(this.state.topicItem)}</Text>
15989
<Text style={styles.metainfo}>刚刚更新</Text>
16090
</View>
16191

16292
<View style={styles.metaareatag}>
163-
<Text style={styles.nodename}>{topic.node_name}</Text>
93+
<Text style={styles.nodename}>{this.state.topicItem.node_name}</Text>
16494
<View style={styles.replieCountBg}>
165-
<Text style={styles.replieCount}>{this._countRate(topic.replies_count)}</Text>
95+
<Text style={styles.replieCount}>{this._countRate(this.state.topicItem.replies_count)}</Text>
16696
</View>
16797
</View>
16898
</View>
@@ -172,110 +102,4 @@ var TopicCard = React.createClass({
172102
}
173103
});
174104

175-
var indicatorStylesheet = StyleSheet.create({
176-
wrapper: {
177-
height: 80,
178-
marginTop: 10,
179-
marginBottom: 10
180-
},
181-
content: {
182-
marginTop: 10,
183-
marginBottom: 10,
184-
height: 60
185-
}
186-
});
187-
188-
var styles = StyleSheet.create({
189-
loading: {
190-
flex: 1,
191-
backgroundColor: '#ffffff',
192-
alignItems: 'center',
193-
justifyContent: 'center'
194-
},
195-
loadingTip: {
196-
color: '#333333',
197-
fontSize: 14,
198-
fontWeight: 'bold',
199-
letterSpacing: 2,
200-
marginTop: 12
201-
},
202-
topicListView: {
203-
flex: 1,
204-
backgroundColor: '#f0f0f0',
205-
padding: 5,
206-
overflow: 'hidden'
207-
},
208-
topicCard: {
209-
flex: 1,
210-
flexDirection: 'row',
211-
padding: 10,
212-
backgroundColor: '#ffffff',
213-
marginBottom: 5,
214-
borderColor: '#f0f0f0',
215-
borderStyle: 'solid',
216-
borderWidth: 1,
217-
borderRadius: 0
218-
},
219-
avatarImg: {
220-
width: 48,
221-
height: 48,
222-
borderRadius: 24
223-
},
224-
metainfo: {
225-
color: '#999999',
226-
fontSize: 12,
227-
lineHeight: 16,
228-
letterSpacing: 1,
229-
marginRight: 5
230-
},
231-
avatar: {
232-
flex: 2
233-
},
234-
titleMeta: {
235-
flex: 7,
236-
justifyContent: 'center'
237-
},
238-
replieCount: {
239-
fontSize: 12,
240-
lineHeight: 12,
241-
color: '#ffffff',
242-
fontWeight: 'bold'
243-
},
244-
replieCountBg: {
245-
backgroundColor: '#e74c3c',
246-
position: 'absolute',
247-
bottom: 0,
248-
right: 0,
249-
paddingBottom: 5,
250-
paddingTop: 5,
251-
paddingLeft: 10,
252-
paddingRight: 10,
253-
borderRadius: 11
254-
},
255-
nodename: {
256-
color: '#999999',
257-
fontSize: 12,
258-
lineHeight: 16
259-
},
260-
metaarea: {
261-
flexDirection: 'row',
262-
marginTop: 10,
263-
justifyContent: 'flex-start',
264-
flexWrap: 'wrap'
265-
},
266-
metaareatag: {
267-
flexDirection: 'row',
268-
marginTop: 2,
269-
justifyContent: 'flex-start',
270-
flexWrap: 'wrap'
271-
},
272-
topicTitle: {
273-
fontSize: 16,
274-
lineHeight: 20,
275-
fontWeight: 'bold',
276-
letterSpacing: 1,
277-
color: '#333333'
278-
}
279-
});
280-
281-
module.exports = TopicCard;
105+
module.exports = TopicCard;

0 commit comments

Comments
 (0)