Skip to content

Commit a092dcf

Browse files
fmtjavafmtjava
committed
hook重构项目
1 parent 92c74a1 commit a092dcf

File tree

13 files changed

+496
-518
lines changed

13 files changed

+496
-518
lines changed

‎ts/components/FollowHorizontalItem.tsx‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,29 +8,24 @@ interface IProps {
88
item: Item;
99
}
1010

11-
class FollowHorizontalItem extends React.Component<IProps> {
12-
render() {
13-
const {item} = this.props;
14-
return (
15-
<View style={styles.container}>
16-
<View>
17-
<FastImage
18-
style={styles.image}
19-
source={{uri: item.data.cover.feed}}
20-
/>
21-
<View style={styles.category}>
22-
<Text style={styles.categoryText}>{item.data.category}</Text>
23-
</View>
11+
function FollowHorizontalItem(props: IProps) {
12+
const {item} = props;
13+
return (
14+
<View style={styles.container}>
15+
<View>
16+
<FastImage style={styles.image} source={{uri: item.data.cover.feed}} />
17+
<View style={styles.category}>
18+
<Text style={styles.categoryText}>{item.data.category}</Text>
2419
</View>
25-
<Text numberOfLines={1} style={styles.title}>
26-
{item.data.title}
27-
</Text>
28-
<Text style={styles.releaseTime}>
29-
{formatDateMsByYMDHM(item.data.releaseTime)}
30-
</Text>
3120
</View>
32-
);
33-
}
21+
<Text numberOfLines={1} style={styles.title}>
22+
{item.data.title}
23+
</Text>
24+
<Text style={styles.releaseTime}>
25+
{formatDateMsByYMDHM(item.data.releaseTime)}
26+
</Text>
27+
</View>
28+
);
3429
}
3530

3631
const styles = StyleSheet.create({

‎ts/components/TopicDetailItem.tsx‎

Lines changed: 66 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -14,93 +14,88 @@ interface IProps {
1414
item: ITopicDetailItem;
1515
}
1616

17-
class TopicDetailItem extends React.Component<IProps> {
18-
go2VideoDetail = (item: Item) => {
17+
function TopicDetailItem(props: IProps) {
18+
const go2VideoDetail = (item: Item) => {
1919
navigate('VideoDetail', {item: item});
2020
};
2121

22-
tagItem = (value: Tag) => {
22+
const tagItem = (value: Tag) => {
2323
return (
2424
<View key={value.name} style={styles.tag}>
2525
<Text style={styles.tagText}>{value.name}</Text>
2626
</View>
2727
);
2828
};
2929

30-
render() {
31-
const {item} = this.props;
32-
return (
33-
<View style={styles.container}>
34-
<View style={styles.headContainer}>
35-
<FastImage
36-
style={styles.icon}
37-
source={{
38-
uri: item.data.header.icon,
39-
}}
40-
/>
41-
<View style={styles.headLeftContainer}>
42-
<Text style={styles.issuerName}>{item.data.header.issuerName}</Text>
43-
<View style={styles.headBottomContainer}>
44-
<Text style={styles.time}>
45-
{formatDateMsByYMD(item.data.header.time)}发布:
46-
</Text>
47-
<Text numberOfLines={1} style={styles.title}>
48-
{item.data.content.data.title}
49-
</Text>
50-
</View>
30+
const {item} = props;
31+
return (
32+
<View style={styles.container}>
33+
<View style={styles.headContainer}>
34+
<FastImage
35+
style={styles.icon}
36+
source={{
37+
uri: item.data.header.icon,
38+
}}
39+
/>
40+
<View style={styles.headLeftContainer}>
41+
<Text style={styles.issuerName}>{item.data.header.issuerName}</Text>
42+
<View style={styles.headBottomContainer}>
43+
<Text style={styles.time}>
44+
{formatDateMsByYMD(item.data.header.time)}发布:
45+
</Text>
46+
<Text numberOfLines={1} style={styles.title}>
47+
{item.data.content.data.title}
48+
</Text>
5149
</View>
5250
</View>
53-
<Text numberOfLines={2} style={styles.description}>
54-
{item.data.content.data.description}
55-
</Text>
51+
</View>
52+
<Text numberOfLines={2} style={styles.description}>
53+
{item.data.content.data.description}
54+
</Text>
5655

57-
<View style={styles.tagContainer}>
58-
{item.data.content.data.tags.length > 3
59-
? item.data.content.data.tags
60-
.slice(0, 3)
61-
.map((value) => this.tagItem(value))
62-
: item.data.content.data.tags.map((value) => this.tagItem(value))}
56+
<View style={styles.tagContainer}>
57+
{item.data.content.data.tags.length > 3
58+
? item.data.content.data.tags
59+
.slice(0, 3)
60+
.map((value) => tagItem(value))
61+
: item.data.content.data.tags.map((value) => tagItem(value))}
62+
</View>
63+
<TouchableWithoutFeedback
64+
onPress={() => go2VideoDetail(item.data.content)}>
65+
<FastImage
66+
style={styles.feed}
67+
source={{
68+
uri: item.data.content.data.cover.feed,
69+
}}
70+
/>
71+
</TouchableWithoutFeedback>
72+
<View style={styles.consumeContainer}>
73+
<View style={styles.consumeItem}>
74+
<IconLove size={22} color="#9a9a9a" />
75+
<Text style={styles.consumeText}>
76+
{item.data.content.data.consumption.collectionCount}
77+
</Text>
6378
</View>
64-
<TouchableWithoutFeedback
65-
onPress={() => this.go2VideoDetail(item.data.content)}>
66-
<FastImage
67-
style={styles.feed}
68-
source={{
69-
uri: item.data.content.data.cover.feed,
70-
}}
71-
/>
72-
</TouchableWithoutFeedback>
73-
<View style={styles.consumeContainer}>
74-
<View style={styles.consumeItem}>
75-
<IconLove size={22} color="#9a9a9a" />
76-
<Text style={styles.consumeText}>
77-
{item.data.content.data.consumption.collectionCount}
78-
</Text>
79-
</View>
80-
<View style={styles.consumeItem}>
81-
<IconCommentlinesFill size={16} color="#9a9a9a" />
82-
<Text style={styles.consumeText}>
83-
{item.data.content.data.consumption.replyCount}
84-
</Text>
85-
</View>
86-
<View style={styles.consumeItem}>
87-
<IconStar color="#9a9a9a" />
88-
<Text style={styles.consumeText}>收藏</Text>
89-
</View>
90-
<IconShare1
91-
color="#9a9a9a"
92-
onPress={() =>
93-
share(
94-
item.data.content.data.title,
95-
item.data.content.data.playUrl,
96-
)
97-
}
98-
/>
79+
<View style={styles.consumeItem}>
80+
<IconCommentlinesFill size={16} color="#9a9a9a" />
81+
<Text style={styles.consumeText}>
82+
{item.data.content.data.consumption.replyCount}
83+
</Text>
84+
</View>
85+
<View style={styles.consumeItem}>
86+
<IconStar color="#9a9a9a" />
87+
<Text style={styles.consumeText}>收藏</Text>
9988
</View>
100-
<View style={styles.line} />
89+
<IconShare1
90+
color="#9a9a9a"
91+
onPress={() =>
92+
share(item.data.content.data.title, item.data.content.data.playUrl)
93+
}
94+
/>
10195
</View>
102-
);
103-
}
96+
<View style={styles.line} />
97+
</View>
98+
);
10499
}
105100

106101
const styles = StyleSheet.create({

‎ts/components/VideoRelateItem.tsx‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,27 @@ interface IProps {
88
item: Item;
99
}
1010

11-
class VideoRelateItem extends React.Component<IProps> {
12-
render() {
13-
const {item} = this.props;
14-
return (
15-
<View style={styles.container}>
16-
<View style={styles.feedContainer}>
17-
<FastImage
18-
source={{uri: item.data.cover.feed}}
19-
style={styles.image}
20-
/>
21-
<View style={styles.timeContainer}>
22-
<Text style={styles.timeText}>
23-
{formatDateMsByMS(item.data.duration * 1000)}
24-
</Text>
25-
</View>
26-
</View>
27-
<View style={styles.videoInfo}>
28-
<Text style={styles.title}>{item.data.title}</Text>
29-
<Text style={styles.category}>
30-
#{item.data.category} /{' '}
31-
{item.data.author == null ? '' : item.data.author.name}
11+
function VideoRelateItem(props: IProps) {
12+
const {item} = props;
13+
return (
14+
<View style={styles.container}>
15+
<View style={styles.feedContainer}>
16+
<FastImage source={{uri: item.data.cover.feed}} style={styles.image} />
17+
<View style={styles.timeContainer}>
18+
<Text style={styles.timeText}>
19+
{formatDateMsByMS(item.data.duration * 1000)}
3220
</Text>
3321
</View>
3422
</View>
35-
);
36-
}
23+
<View style={styles.videoInfo}>
24+
<Text style={styles.title}>{item.data.title}</Text>
25+
<Text style={styles.category}>
26+
#{item.data.category} /{' '}
27+
{item.data.author == null ? '' : item.data.author.name}
28+
</Text>
29+
</View>
30+
</View>
31+
);
3732
}
3833

3934
const styles = StyleSheet.create({

‎ts/config/dva.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export default app._store;
1616

1717
//防止Model被重复创建,类似与Map
1818
const cached = new Map<string, boolean>();
19-
19+
//动态创建热门标签
2020
export function createHotTabModel(namespace: string) {
2121
if (!cached.get(namespace)) {
2222
const model = modelExtend(hotTab, {namespace});

‎ts/model/dva/Models.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import hotTab from './HotTabModel';
1111
import search from './SearchModel';
1212
import topicDetail from './TopicDetailModel';
1313

14+
//存储项目中每一个页面对应的数据仓库
1415
const models = [
1516
daily,
1617
category,
@@ -26,6 +27,7 @@ const models = [
2627
topicDetail,
2728
];
2829

30+
//存储每一个页面所需的数据状态
2931
export type RootState = {
3032
daily: typeof daily.state;
3133
category: typeof category.state;

0 commit comments

Comments
 (0)