Skip to content

Commit 3de55b0

Browse files
CodeXYuCodeXYu
committed
1. 新增计算百思列表项的高度
2. 优化瀑布流图片高度 3. 优化百思的列表表现形式
1 parent f3b3c2a commit 3de55b0

File tree

21 files changed

+381
-93
lines changed

21 files changed

+381
-93
lines changed

‎.eslintrc.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ module.exports = {
1414
"Android": true,
1515
"Toast": true,
1616
"isIPhoneX": true,
17+
"Theme": true,
1718
},
1819
"extends": [
1920
"eslint:recommended",

‎android/app/build.gradle‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,8 @@ android {
175175
}
176176

177177
dependencies {
178+
compile project(':react-native-webview')
179+
compile project(':react-native-measure-text')
178180
compile project(':react-native-spring-scrollview')
179181
compile project(':rn-fetch-blob')
180182
compile project(':react-native-vector-icons')

‎android/app/src/main/java/com/shitu/MainApplication.java‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
import android.support.multidex.MultiDex;
66

77
import com.facebook.react.ReactApplication;
8+
import com.reactnativecommunity.webview.RNCWebViewPackage;
9+
import io.github.airamrguez.RNMeasureTextPackage;
810
import com.bolan9999.SpringScrollViewPackage;
911
import com.RNFetchBlob.RNFetchBlobPackage;
1012
import com.oblador.vectoricons.VectorIconsPackage;
@@ -34,6 +36,8 @@ public boolean getUseDeveloperSupport() {
3436
protected List<ReactPackage> getPackages() {
3537
return Arrays.<ReactPackage>asList(
3638
new MainReactPackage(),
39+
new RNCWebViewPackage(),
40+
new RNMeasureTextPackage(),
3741
new SpringScrollViewPackage(),
3842
new RNFetchBlobPackage(),
3943
new VectorIconsPackage(),

‎android/settings.gradle‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
rootProject.name = 'ShiTu'
2+
include ':react-native-webview'
3+
project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
4+
include ':react-native-measure-text'
5+
project(':react-native-measure-text').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-measure-text/android')
26
include ':react-native-spring-scrollview'
37
project(':react-native-spring-scrollview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-spring-scrollview/android')
48
include ':rn-fetch-blob'

‎app/components/TableList/index.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,6 @@ export default class index<ItemT> extends React.Component<Props<ItemT>, State<It
206206
this.props.autoPagination &&
207207
this.state.paginationStatus === PaginationStatus.WAITING
208208
) {
209-
console.log('1111111111');
210209
this.onPaginate();
211210
}
212211
};
@@ -279,7 +278,7 @@ export default class index<ItemT> extends React.Component<Props<ItemT>, State<It
279278
};
280279

281280
updateRows = (rows: ?Array<any>, paginationStatus: number) => {
282-
console.log('rows', rows, paginationStatus);
281+
// console.log('rows', rows, paginationStatus);
283282
if (rows) {
284283
this.setRows(rows);
285284
this.setState({

‎app/mobx/News/BuDeJieMobx.js‎

Lines changed: 161 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,172 @@
33
* Created by Rabbit on 2018/5/4.
44
*/
55

6-
import { observable, action, runInAction } from 'mobx';
7-
import type { RTBDJList, RTGankResult } from '../../servers/News/interfaces';
8-
import { loadBuDeJieData } from '../../servers/News';
6+
import { action, observable, runInAction } from 'mobx';
7+
import type { RTBDJList } from '../../servers/News/interfaces';
8+
import { RTBDJResult } from '../../servers/News/interfaces';
99
import type { RTBuDeJieType } from '../../servers/News';
10+
import { loadBuDeJieData } from '../../servers/News';
1011
import { System } from '../../utils';
1112
import { ConfigStore } from '../../store/ConfigStore';
12-
import { Joke, Picture, RTBDJResult, ToolBar, UserInfo } from '../../servers/News/interfaces';
1313

14-
const ContainerHeight = System.SCREEN_HEIGHT - 49 - 64 - 54;
15-
const SpacingHeight = 80;
14+
import MeasureText from 'react-native-measure-text';
15+
16+
/**
17+
* 容器的高度
18+
* @type {number}
19+
*/
20+
// const ContainerHeight: number = System.SCREEN_HEIGHT - 49 - 54;
21+
const MaxScreenImageHeight = 7000;
22+
23+
const UserInfoHeight = px2dp(100);
24+
const ToolBarHeight = px2dp(60);
25+
26+
const JokeItemWidth = SCREEN_WIDTH - px2dp(40);
27+
const JokeFontSize = FONT_SIZE(17);
28+
29+
const SpacingHeight = 10;
30+
const DefaultNormalHeight = 49;
31+
const DefaultScrollTopBarHeight = 54;
1632

1733
class BuDeJieMobx extends ConfigStore {
34+
containerHeight: number =
35+
System.SCREEN_HEIGHT -
36+
DefaultNormalHeight -
37+
Theme.navBarHeight -
38+
Theme.iPhoneXBottomHeight -
39+
DefaultScrollTopBarHeight -
40+
SpacingHeight;
41+
42+
static async handleJokeTextWidth(text) {
43+
const heights = await MeasureText.heights({
44+
texts: [text],
45+
width: JokeItemWidth,
46+
fontSize: JokeFontSize,
47+
fontWeight: 'normal'
48+
});
49+
return parseFloat(heights.join());
50+
}
51+
1852
@observable
1953
isRefreshing: boolean = true;
2054
@observable
2155
dataSource: Array<RTBDJList>;
2256
@observable
2357
maxtime: string = '';
2458

25-
@action
59+
/**
60+
* imageHeight: 所有Item中，Image的高度
61+
* containerHeight: Item内容的高度
62+
* userInfoHeight: 顶部用户信息的高度
63+
* itemHeight: Item整体高度
64+
*/
65+
66+
@action.bound
2667
async fetchBuDeJieData(type: RTBuDeJieType, value: string) {
2768
try {
2869
const dataSource: RTBDJResult = await loadBuDeJieData(type, value);
2970

30-
// console.log('ssssssssssss', dataSource.info.count);
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);
31131

32-
dataSource.list.map((item: RTBDJList) => {
33-
const imageHeight = (System.SCREEN_WIDTH * item.height) / item.width;
132+
item.jokeHeight = JokeHeight;
34133

35-
item.imageHeight = imageHeight;
36-
item.containerHeight = imageHeight;
37-
item.isLongPicture = false;
134+
// _dataSource.push(item);
38135

39-
if (imageHeight > ContainerHeight && imageHeight < System.SCREEN_HEIGHT) {
40-
item.containerHeight = imageHeight - SpacingHeight;
41-
item.isLongPicture = false;
42-
} else if (imageHeight > System.SCREEN_HEIGHT && item.is_gif === '0') {
43-
item.isLongPicture = true;
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;
148+
});
149+
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;
44165
}
45166

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+
46172
const {
47173
text,
48174
profile_image,
@@ -55,10 +181,12 @@ class BuDeJieMobx extends ConfigStore {
55181
cdn_img,
56182
containerHeight,
57183
isLongPicture,
184+
isLongPictureCanOpened,
58185
weixin_url,
59186
theme_name,
60187
is_gif,
61-
gifFistFrame
188+
gifFistFrame,
189+
imageHeight
62190
} = item;
63191

64192
const userInfoData = {
@@ -68,30 +196,40 @@ class BuDeJieMobx extends ConfigStore {
68196
theme_name,
69197
type
70198
};
199+
71200
const toolBarData = { love, hate, repost, comment, type };
72201
const jokeData = { text, type };
202+
73203
const pictureData = {
74204
cdn_img,
75205
imageHeight,
76206
isLongPicture,
207+
isLongPictureCanOpened,
77208
containerHeight,
78209
weixin_url,
79210
is_gif,
80211
type,
81212
gifFistFrame,
82-
...jokeData
213+
...item
83214
};
84215

216+
item.jokeHeight = JokeHeight;
85217
item.userInfoData = userInfoData;
86218
item.toolBarData = toolBarData;
87219
item.jokeData = jokeData;
88220
item.pictureData = pictureData;
89-
});
221+
222+
_dataSource.push(item);
223+
}
224+
225+
console.log('_datasource', _dataSource);
226+
227+
// console.log('_newData', _newData);
90228

91229
runInAction(() => {
92-
this.dataSource = dataSource.list;
93-
this.maxtime = dataSource.info.maxid;
230+
this.dataSource = _dataSource;
94231
});
232+
this.maxtime = dataSource.info.maxid;
95233
} catch (e) {
96234
// this.showErrorView(e);
97235
}

‎app/mobx/News/WelfareMobx.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,15 @@ class WelfareMobx extends ConfigStore {
5757

5858
@action.bound
5959
async loadWelfareData(type: loadDataType = 'refreshing') {
60+
this.showLoading();
6061
this.page = type === 'refreshing' ? 1 : this.page + 1;
6162

6263
try {
6364
const data = await fetchWelfareData(this.page);
6465

6566
const results = data.results;
6667

67-
const defaultHeights = [277, 216, 211, 206, 287, 214];
68+
const defaultHeights = [216, 245, 263, 234, 259, 222];
6869

6970
results.map((item: RTWeal) => {
7071
const imageWidth = System.SCREEN_WIDTH / 2 - 15;
@@ -82,6 +83,7 @@ class WelfareMobx extends ConfigStore {
8283
});
8384
} else {
8485
runInAction(() => {
86+
8587
this.page = 1;
8688
this.dataSource = results;
8789
});
@@ -92,6 +94,7 @@ class WelfareMobx extends ConfigStore {
9294
this.showToast(e);
9395
console.log(e);
9496
} finally {
97+
this.hideLoading();
9598
runInAction(() => {
9699
this.isRefreshing = false;
97100
});

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import React from 'react';
7-
import { View } from 'react-native';
7+
import { View, StyleSheet } from 'react-native';
88

99
import { RTBDJList, ToolBar, UserInfo, Joke, Picture } from '../../../../servers/News/interfaces';
1010
import { ContainerItem } from './Items/ContainerItem';
@@ -25,6 +25,8 @@ const BaseItem = (props: Props) => {
2525
const { userInfoData, toolBarData } = props.itemData;
2626
const { itemData, itemPress, picturePress, videoPress } = props;
2727

28+
// console.log('itemData', itemData);
29+
2830
return (
2931
<View>
3032
<UserInfoView userInfoData={userInfoData} />
@@ -34,9 +36,17 @@ const BaseItem = (props: Props) => {
3436
picturePress={picturePress}
3537
videoPress={videoPress}
3638
/>
37-
<ToolBarView toolBarData={toolBarData} />
39+
{/*<ToolBarView toolBarData={toolBarData} />*/}
40+
<View style={styles.bottomViewStyle} />
3841
</View>
3942
);
4043
};
4144

45+
const styles = StyleSheet.create({
46+
bottomViewStyle: {
47+
backgroundColor: 'red',
48+
height: px2dp(20)
49+
}
50+
});
51+
4252
export { BaseItem };

0 commit comments

Comments
 (0)