Skip to content

Commit e5dc418

Browse files
CodeXYuCodeXYu
committed
1. 基本完成不得姐列表项的重构，新的架构使用react-native-largelist作为列表
1 parent 3de55b0 commit e5dc418

File tree

9 files changed

+298
-199
lines changed

9 files changed

+298
-199
lines changed

‎app/mobx/News/BuDeJieMobx.js‎

Lines changed: 142 additions & 180 deletions
Original file line numberDiff line numberDiff line change
@@ -17,223 +17,185 @@ import MeasureText from 'react-native-measure-text';
1717
* 容器的高度
1818
* @type {number}
1919
*/
20-
// const ContainerHeight: number = System.SCREEN_HEIGHT - 49 - 54;
21-
const MaxScreenImageHeight = 7000;
20+
const MAX_SCREEN_IMAGE_HEIGHT = 7000;
2221

23-
const UserInfoHeight = px2dp(100);
24-
const ToolBarHeight = px2dp(60);
22+
/*
23+
* 顶部UserInfo的高度， px2dp(100)为整体预估高度， px2dp(10)为距离顶部的margin高度
24+
*/
25+
const USER_INFO_HEIGHT = px2dp(100) + px2dp(10);
2526

26-
const JokeItemWidth = SCREEN_WIDTH - px2dp(40);
27-
const JokeFontSize = FONT_SIZE(17);
27+
/**
28+
* 文字有marginVertical: px2dp(10)属性
29+
*/
30+
const JOKE_SPACE_HEIGHT = px2dp(20);
2831

29-
const SpacingHeight = 10;
30-
const DefaultNormalHeight = 49;
31-
const DefaultScrollTopBarHeight = 54;
32+
/**
33+
* px2dp(20) 为底部间距高度
34+
*/
35+
const ITEM_HEIGHT_SPACE_HEIGHT = px2dp(10) + JOKE_SPACE_HEIGHT;
3236

33-
class BuDeJieMobx extends ConfigStore {
34-
containerHeight: number =
35-
System.SCREEN_HEIGHT -
36-
DefaultNormalHeight -
37-
Theme.navBarHeight -
38-
Theme.iPhoneXBottomHeight -
39-
DefaultScrollTopBarHeight -
40-
SpacingHeight;
37+
const DEFAULT_SPACE_HEIGHT = 10;
38+
const DEFAULT_TAB_BAR_HEIGHT = 49;
39+
const DEFAULT_SCROLL_TOP_BAR_HEIGHT = 54;
40+
41+
const JOKE_ITEM_WIDTH = SCREEN_WIDTH - px2dp(40);
42+
const JOKE_FONT_SIZE = FONT_SIZE(17);
4143

44+
class BuDeJieMobx extends ConfigStore {
4245
static async handleJokeTextWidth(text) {
4346
const heights = await MeasureText.heights({
4447
texts: [text],
45-
width: JokeItemWidth,
46-
fontSize: JokeFontSize,
48+
width: JOKE_ITEM_WIDTH,
49+
fontSize: JOKE_FONT_SIZE,
4750
fontWeight: 'normal'
4851
});
4952
return parseFloat(heights.join());
5053
}
5154

55+
static async handleLargeListData(parameters) {
56+
const { data, type } = parameters;
57+
58+
const containerHeight =
59+
SCREEN_HEIGHT -
60+
DEFAULT_TAB_BAR_HEIGHT -
61+
Theme.navBarHeight -
62+
Theme.iPhoneXBottomHeight -
63+
DEFAULT_SCROLL_TOP_BAR_HEIGHT -
64+
DEFAULT_SPACE_HEIGHT;
65+
66+
const dataSource: Array = [];
67+
68+
const largeListData = { items: [] };
69+
const _containerHeight = containerHeight;
70+
71+
for (let i = 0; i < data.length; i++) {
72+
const item: RTBDJList = data[i];
73+
74+
const height = (System.SCREEN_WIDTH * item.height) / item.width;
75+
const isGif = item.is_gif === '1';
76+
77+
item.imageHeight = height;
78+
item.isLongPicture = height > _containerHeight && item.is_gif === '0';
79+
item.containerHeight = _containerHeight;
80+
81+
if (item.isLongPicture || isGif) {
82+
item.imageHeight = SCREEN_HEIGHT * 0.5;
83+
}
84+
85+
item.isLongPictureCanOpened = !(height > _containerHeight && height > MAX_SCREEN_IMAGE_HEIGHT && !isGif);
86+
87+
const JokeHeight = await BuDeJieMobx.handleJokeTextWidth(item.text);
88+
const ImageHeight = item.imageHeight;
89+
// const ImageHeight = 0;
90+
item.itemHeight = USER_INFO_HEIGHT + JokeHeight + ImageHeight + ITEM_HEIGHT_SPACE_HEIGHT;
91+
92+
const {
93+
text,
94+
profile_image,
95+
name,
96+
passtime,
97+
love,
98+
hate,
99+
repost,
100+
comment,
101+
cdn_img,
102+
containerHeight,
103+
isLongPicture,
104+
isLongPictureCanOpened,
105+
weixin_url,
106+
theme_name,
107+
is_gif,
108+
gifFistFrame,
109+
imageHeight
110+
} = item;
111+
112+
const userInfoData = { profile_image, name, passtime, theme_name, type };
113+
114+
const toolBarData = { love, hate, repost, comment, type };
115+
const jokeData = { text, type };
116+
117+
const pictureData = {
118+
cdn_img,
119+
imageHeight,
120+
isLongPicture,
121+
isLongPictureCanOpened,
122+
containerHeight,
123+
weixin_url,
124+
is_gif,
125+
type,
126+
gifFistFrame,
127+
...item
128+
};
129+
130+
item.userInfoData = userInfoData;
131+
item.toolBarData = toolBarData;
132+
item.jokeData = jokeData;
133+
item.pictureData = pictureData;
134+
135+
dataSource.push(item);
136+
137+
largeListData.items.push(item);
138+
}
139+
return { largeListData, dataSource };
140+
}
141+
52142
@observable
53143
isRefreshing: boolean = true;
54144
@observable
55145
dataSource: Array<RTBDJList>;
56146
@observable
57147
maxtime: string = '';
148+
@observable
149+
largeListData: Array = [{ items: [] }];
150+
151+
constructor(type) {
152+
super();
153+
console.log('type------', type);
154+
}
58155

59156
/**
60157
* imageHeight: 所有Item中，Image的高度
61158
* containerHeight: Item内容的高度
62159
* userInfoHeight: 顶部用户信息的高度
63160
* itemHeight: Item整体高度
64161
*/
65-
66162
@action.bound
67163
async fetchBuDeJieData(type: RTBuDeJieType, value: string) {
164+
console.log('value', type, value);
68165
try {
69-
const dataSource: RTBDJResult = await loadBuDeJieData(type, value);
70-
71-
const _newData = dataSource.list.filter(async (item: RTBDJList) => {
72-
const height = (System.SCREEN_WIDTH * item.height) / item.width;
73-
const isGif = item.is_gif === '1';
74-
75-
item.imageHeight = height;
76-
item.isLongPicture = height > this.containerHeight && item.is_gif === '0';
77-
item.containerHeight = this.containerHeight;
78-
79-
if (item.isLongPicture || isGif) {
80-
item.imageHeight = SCREEN_HEIGHT * 0.5;
81-
}
82-
83-
item.isLongPictureCanOpened = !(height > this.containerHeight && height > MaxScreenImageHeight && !isGif);
84-
85-
const {
86-
text,
87-
profile_image,
88-
name,
89-
passtime,
90-
love,
91-
hate,
92-
repost,
93-
comment,
94-
cdn_img,
95-
containerHeight,
96-
isLongPicture,
97-
isLongPictureCanOpened,
98-
weixin_url,
99-
theme_name,
100-
is_gif,
101-
gifFistFrame,
102-
imageHeight
103-
} = item;
104-
105-
const userInfoData = {
106-
profile_image,
107-
name,
108-
passtime,
109-
theme_name,
110-
type
111-
};
112-
113-
const toolBarData = { love, hate, repost, comment, type };
114-
const jokeData = { text, type };
115-
116-
const pictureData = {
117-
cdn_img,
118-
imageHeight,
119-
isLongPicture,
120-
isLongPictureCanOpened,
121-
containerHeight,
122-
weixin_url,
123-
is_gif,
124-
type,
125-
gifFistFrame,
126-
...item
127-
};
128-
129-
const JokeHeight = await BuDeJieMobx.handleJokeTextWidth(item.text);
130-
item.itemHeight = UserInfoHeight + JokeHeight + item.imageHeight + px2dp(40);
131-
132-
item.jokeHeight = JokeHeight;
133-
134-
// _dataSource.push(item);
135-
136-
// console.log('ggggggg', item, item.itemHeight);
137-
138-
// return item;
139-
140-
// console.log('2222222', item);
141-
142-
// console.log('itemHeight', UserInfoHeight, JokeHeight, item.imageHeight);
143-
144-
// item.userInfoData = userInfoData;
145-
// item.toolBarData = toolBarData;
146-
// item.jokeData = jokeData;
147-
// item.pictureData = pictureData;
166+
const buDeJieData: RTBDJResult = await loadBuDeJieData(type, value);
167+
168+
const { largeListData, dataSource } = await BuDeJieMobx.handleLargeListData({
169+
data: buDeJieData.list,
170+
type: type
148171
});
149172

150-
const list = dataSource.list;
151-
const _dataSource: Array = [];
152-
153-
for (let i = 0; i < list.length; i++) {
154-
const item: RTBDJList = list[i];
155-
156-
const height = (System.SCREEN_WIDTH * item.height) / item.width;
157-
const isGif = item.is_gif === '1';
158-
159-
item.imageHeight = height;
160-
item.isLongPicture = height > this.containerHeight && item.is_gif === '0';
161-
item.containerHeight = this.containerHeight;
162-
163-
if (item.isLongPicture || isGif) {
164-
item.imageHeight = SCREEN_HEIGHT * 0.5;
165-
}
166-
167-
item.isLongPictureCanOpened = !(height > this.containerHeight && height > MaxScreenImageHeight && !isGif);
168-
169-
const JokeHeight = await BuDeJieMobx.handleJokeTextWidth(item.text);
170-
item.itemHeight = UserInfoHeight + JokeHeight + item.imageHeight + px2dp(40);
171-
172-
const {
173-
text,
174-
profile_image,
175-
name,
176-
passtime,
177-
love,
178-
hate,
179-
repost,
180-
comment,
181-
cdn_img,
182-
containerHeight,
183-
isLongPicture,
184-
isLongPictureCanOpened,
185-
weixin_url,
186-
theme_name,
187-
is_gif,
188-
gifFistFrame,
189-
imageHeight
190-
} = item;
191-
192-
const userInfoData = {
193-
profile_image,
194-
name,
195-
passtime,
196-
theme_name,
197-
type
198-
};
199-
200-
const toolBarData = { love, hate, repost, comment, type };
201-
const jokeData = { text, type };
202-
203-
const pictureData = {
204-
cdn_img,
205-
imageHeight,
206-
isLongPicture,
207-
isLongPictureCanOpened,
208-
containerHeight,
209-
weixin_url,
210-
is_gif,
211-
type,
212-
gifFistFrame,
213-
...item
214-
};
215-
216-
item.jokeHeight = JokeHeight;
217-
item.userInfoData = userInfoData;
218-
item.toolBarData = toolBarData;
219-
item.jokeData = jokeData;
220-
item.pictureData = pictureData;
221-
222-
_dataSource.push(item);
173+
console.log('largeListData', largeListData);
174+
175+
if (value === '') {
176+
console.log('第一次加载？value', value);
177+
runInAction(() => {
178+
this.dataSource = dataSource;
179+
this.largeListData = [largeListData];
180+
this.maxtime = buDeJieData.info.maxid;
181+
});
182+
} else {
183+
console.log('加载更多？value', value);
184+
console.log('largeListData-----', this.largeListData[0].items);
185+
runInAction(() => {
186+
this.dataSource = this.dataSource.concat(dataSource);
187+
this.largeListData = this.largeListData.concat([largeListData]);
188+
this.maxtime = buDeJieData.info.maxid;
189+
});
223190
}
224191

225-
console.log('_datasource', _dataSource);
192+
console.log('this.largeListData.slice', this.largeListData.slice());
226193

227-
// console.log('_newData', _newData);
228-
229-
runInAction(() => {
230-
this.dataSource = _dataSource;
231-
});
232-
this.maxtime = dataSource.info.maxid;
233194
} catch (e) {
234-
// this.showErrorView(e);
195+
this.showErrorView(e);
235196
}
236197
}
198+
237199
}
238200

239201
export { BuDeJieMobx };

‎app/pages/News/BuDeJie/Components/BaseItem.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ const BaseItem = (props: Props) => {
4444

4545
const styles = StyleSheet.create({
4646
bottomViewStyle: {
47-
backgroundColor: 'red',
48-
height: px2dp(20)
47+
backgroundColor: '#c0c0c0',
48+
height: px2dp(10)
4949
}
5050
});
5151

0 commit comments

Comments
 (0)