Skip to content

Commit 92c74a1

Browse files
fmtjavafmtjava
committed
hook式改写首页以及发现页面
1 parent 79fc15f commit 92c74a1

File tree

9 files changed

+242
-254
lines changed

9 files changed

+242
-254
lines changed

‎ios/tmp.xcconfig‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
API_URL=http:/$()/baobab.kaiyanapp.com/api/
22
APP_NAME=Eyepetizer
3-
VERSIONCODE=2
4-
VERSIONNAME=1.0.1
3+
VERSIONCODE=3
4+
VERSIONNAME=1.0.2

‎ts/components/FollowItem.tsx‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,53 +11,51 @@ interface IProps {
1111
model: IFollowModel;
1212
}
1313

14-
class FollowItem extends React.Component<IProps> {
15-
onPress = (item: Item) => {
14+
function FollowItem(props: IProps) {
15+
const onPress = (item: Item) => {
1616
navigate('VideoDetail', {item: item});
1717
};
18-
renderItem = ({item}: {item: Item}) => {
18+
const renderItem = ({item}: {item: Item}) => {
1919
return (
20-
<TouchableWithoutFeedback onPress={() => this.onPress(item)}>
20+
<TouchableWithoutFeedback onPress={() => onPress(item)}>
2121
<FollowHorizontalItem item={item} />
2222
</TouchableWithoutFeedback>
2323
);
2424
};
2525

26-
keyExtractor = (item: Item) => {
26+
const keyExtractor = (item: Item) => {
2727
return `${item.data.playUrl}`;
2828
};
2929

30-
render() {
31-
const {model} = this.props;
32-
return (
33-
<View style={styles.container}>
34-
<View style={styles.header}>
35-
<FastImage
36-
style={styles.headerImage}
37-
source={{uri: model.data.header.icon}}
38-
/>
39-
<View style={styles.headerDes}>
40-
<Text style={styles.title}>{model.data.header.title}</Text>
41-
<Text numberOfLines={1} style={styles.desc}>
42-
{model.data.header.description}
43-
</Text>
44-
</View>
45-
<View style={styles.follow}>
46-
<Text style={styles.followText}>+ 关注</Text>
47-
</View>
48-
</View>
49-
<FlatList
50-
style={styles.horizontalList}
51-
horizontal
52-
showsHorizontalScrollIndicator={false}
53-
data={model.data.itemList}
54-
renderItem={this.renderItem}
55-
keyExtractor={this.keyExtractor}
30+
const {model} = props;
31+
return (
32+
<View style={styles.container}>
33+
<View style={styles.header}>
34+
<FastImage
35+
style={styles.headerImage}
36+
source={{uri: model.data.header.icon}}
5637
/>
57-
<View style={styles.line} />
38+
<View style={styles.headerDes}>
39+
<Text style={styles.title}>{model.data.header.title}</Text>
40+
<Text numberOfLines={1} style={styles.desc}>
41+
{model.data.header.description}
42+
</Text>
43+
</View>
44+
<View style={styles.follow}>
45+
<Text style={styles.followText}>+ 关注</Text>
46+
</View>
5847
</View>
59-
);
60-
}
48+
<FlatList
49+
style={styles.horizontalList}
50+
horizontal
51+
showsHorizontalScrollIndicator={false}
52+
data={model.data.itemList}
53+
renderItem={renderItem}
54+
keyExtractor={keyExtractor}
55+
/>
56+
<View style={styles.line} />
57+
</View>
58+
);
6159
}
6260

6361
const styles = StyleSheet.create({

‎ts/components/ImageTextItem.tsx‎

Lines changed: 45 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,58 +10,55 @@ interface IProps {
1010
item: Item;
1111
}
1212

13-
class ImageTextItem extends React.Component<IProps> {
14-
onPress = (item: Item) => {
13+
function ImageTextItem(props: IProps) {
14+
const onPress = (item: Item) => {
1515
navigate('VideoDetail', {item: item});
1616
};
17-
render() {
18-
const {item} = this.props;
19-
return (
20-
<View style={styles.container}>
21-
<TouchableWithoutFeedback onPress={() => this.onPress(item)}>
22-
<FastImage
23-
style={styles.feed}
24-
source={{
25-
uri: item.data.cover.feed,
26-
}}
27-
/>
28-
<View style={styles.category}>
29-
<Text style={styles.categoryText}>{item.data.category}</Text>
30-
</View>
31-
<View style={styles.timeContainer}>
32-
<Text style={styles.timeText}>
33-
{formatDateMsByMS(item.data.duration * 1000)}
34-
</Text>
35-
</View>
36-
</TouchableWithoutFeedback>
37-
<View style={styles.bottom}>
38-
<FastImage
39-
style={styles.author}
40-
source={{
41-
uri: item.data.author
42-
? item.data.author.icon
43-
: item.data.tags[0].headerImage,
44-
}}
45-
/>
46-
<View style={styles.content}>
47-
<Text numberOfLines={1} style={styles.title}>
48-
{item.data.title}
49-
</Text>
50-
<Text style={styles.name}>
51-
{item.data.author
52-
? item.data.author.name
53-
: item.data.tags[0].name}
54-
</Text>
55-
</View>
56-
<IconShare1
57-
onPress={() => share(item.data.title, item.data.playUrl)}
58-
color="#00000061"
59-
/>
17+
18+
const {item} = props;
19+
return (
20+
<View style={styles.container}>
21+
<TouchableWithoutFeedback onPress={() => onPress(item)}>
22+
<FastImage
23+
style={styles.feed}
24+
source={{
25+
uri: item.data.cover.feed,
26+
}}
27+
/>
28+
<View style={styles.category}>
29+
<Text style={styles.categoryText}>{item.data.category}</Text>
30+
</View>
31+
<View style={styles.timeContainer}>
32+
<Text style={styles.timeText}>
33+
{formatDateMsByMS(item.data.duration * 1000)}
34+
</Text>
35+
</View>
36+
</TouchableWithoutFeedback>
37+
<View style={styles.bottom}>
38+
<FastImage
39+
style={styles.author}
40+
source={{
41+
uri: item.data.author
42+
? item.data.author.icon
43+
: item.data.tags[0].headerImage,
44+
}}
45+
/>
46+
<View style={styles.content}>
47+
<Text numberOfLines={1} style={styles.title}>
48+
{item.data.title}
49+
</Text>
50+
<Text style={styles.name}>
51+
{item.data.author ? item.data.author.name : item.data.tags[0].name}
52+
</Text>
6053
</View>
61-
<View style={styles.line} />
54+
<IconShare1
55+
onPress={() => share(item.data.title, item.data.playUrl)}
56+
color="#00000061"
57+
/>
6258
</View>
63-
);
64-
}
59+
<View style={styles.line} />
60+
</View>
61+
);
6562
}
6663

6764
const styles = StyleSheet.create({

‎ts/components/TitleItem.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,13 @@ interface IProps {
66
item: Item;
77
}
88

9-
class TitleItem extends React.Component<IProps> {
10-
render() {
11-
const {item} = this.props;
12-
return (
13-
<View style={styles.container}>
14-
<Text style={styles.text}>{item.data.text}</Text>
15-
</View>
16-
);
17-
}
9+
function TitleItem(props: IProps) {
10+
const {item} = props;
11+
return (
12+
<View style={styles.container}>
13+
<Text style={styles.text}>{item.data.text}</Text>
14+
</View>
15+
);
1816
}
1917

2018
const styles = StyleSheet.create({

‎ts/page/daily/DailyPage.tsx‎

Lines changed: 34 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import React from 'react';
1+
import React, {useEffect} from 'react';
22
import {StyleSheet, View, ListRenderItemInfo} from 'react-native';
33
import RefreshListView from 'react-native-refresh-list-view';
44
import ImageTextItem from '@/components/ImageTextItem';
55
import {RootState} from '@/model/dva/Models';
66
import {Item} from '@/model/Daily';
77
import BannerCarousel from '@/components/ BannerCarousel';
88
import TitleItem from '@/components/TitleItem';
9-
import {connect, ConnectedProps} from 'react-redux';
9+
import {shallowEqual, useDispatch, useSelector} from 'react-redux';
1010

1111
const TEXT_HEADER_TYPE = 'textHeader';
1212
const REFRESH_TYPE = 'daily/onRefresh';
@@ -21,28 +21,29 @@ const mapStateToProps = ({daily}: RootState) => {
2121
};
2222
};
2323

24-
const connector = connect(mapStateToProps);
24+
function DailyPage() {
25+
const dispatch = useDispatch();
26+
const {bannerList, dataList, refreshState, nextPageUrl} = useSelector(
27+
mapStateToProps,
28+
shallowEqual,
29+
);
2530

26-
type ModelState = ConnectedProps<typeof connector>;
27-
28-
class DailyPage extends React.Component<ModelState> {
29-
componentDidMount() {
30-
this.onHeaderRefresh();
31-
}
31+
useEffect(() => {
32+
dispatch({
33+
type: REFRESH_TYPE,
34+
});
35+
}, [dispatch]);
3236

33-
onHeaderRefresh = () => {
34-
const {dispatch} = this.props;
37+
const onHeaderRefresh = () => {
3538
dispatch({
3639
type: REFRESH_TYPE,
3740
});
3841
};
3942

40-
onFooterRefresh = () => {
41-
const {nextPageUrl} = this.props;
43+
const onFooterRefresh = () => {
4244
if (nextPageUrl == null) {
4345
return;
4446
}
45-
const {dispatch} = this.props;
4647
dispatch({
4748
type: LOAD_MORE_TYPE,
4849
payload: {
@@ -51,39 +52,36 @@ class DailyPage extends React.Component<ModelState> {
5152
});
5253
};
5354

54-
renderHeader = () => {
55-
const {bannerList} = this.props;
55+
const renderHeader = () => {
5656
return <BannerCarousel bannerList={bannerList} />;
5757
};
58-
renderItem = ({item}: ListRenderItemInfo<Item>) => {
58+
59+
const renderItem = ({item}: ListRenderItemInfo<Item>) => {
5960
return item.type === TEXT_HEADER_TYPE ? (
6061
<TitleItem item={item} />
6162
) : (
6263
<ImageTextItem item={item} />
6364
);
6465
};
6566

66-
keyExtractor = (item: Item) => {
67+
const keyExtractor = (item: Item) => {
6768
return item.data.title ? item.data.title : item.data.text;
6869
};
6970

70-
render() {
71-
const {dataList, refreshState} = this.props;
72-
return (
73-
<View style={styles.container}>
74-
<RefreshListView
75-
data={dataList}
76-
renderItem={this.renderItem}
77-
keyExtractor={this.keyExtractor}
78-
ListHeaderComponent={this.renderHeader}
79-
refreshState={refreshState}
80-
onHeaderRefresh={this.onHeaderRefresh}
81-
onFooterRefresh={this.onFooterRefresh}
82-
showsVerticalScrollIndicator={false}
83-
/>
84-
</View>
85-
);
86-
}
71+
return (
72+
<View style={styles.container}>
73+
<RefreshListView
74+
data={dataList}
75+
renderItem={renderItem}
76+
keyExtractor={keyExtractor}
77+
ListHeaderComponent={renderHeader}
78+
refreshState={refreshState}
79+
onHeaderRefresh={onHeaderRefresh}
80+
onFooterRefresh={onFooterRefresh}
81+
showsVerticalScrollIndicator={false}
82+
/>
83+
</View>
84+
);
8785
}
8886

8987
const styles = StyleSheet.create({
@@ -92,4 +90,4 @@ const styles = StyleSheet.create({
9290
},
9391
});
9492

95-
export default connector(DailyPage);
93+
export default DailyPage;

0 commit comments

Comments
 (0)