mobile / YH_RNComponent · Commits

Go to a project

Authored by 盖剑秋
Commit 87b9c95d63b750e1edd87209135aa81b150f92c5 1 parent 6581556a

Fix few UI issues of new classify. reivewed by lu liang.

Inline Side-by-side
Showing 4 changed files with 22 additions and 24 deletions
@@ -299,6 +299,8 @@ export default class CategoryBList extends Component { @@ -299,6 +299,8 @@ export default class CategoryBList extends Component {
299 299
300 let {width, height} = Dimensions.get('window'); 300 let {width, height} = Dimensions.get('window');
301 const DEVICE_WIDTH_RATIO = width / 375; 301 const DEVICE_WIDTH_RATIO = width / 375;
  302 +let cellWidth = 78 * DEVICE_WIDTH_RATIO;
  303 +let cellPadding = ((width - 102.5 * DEVICE_WIDTH_RATIO) - cellWidth * 3) / 4;
302 304
303 let styles = StyleSheet.create({ 305 let styles = StyleSheet.create({
304 container: { 306 container: {
@@ -342,12 +344,10 @@ let styles = StyleSheet.create({ @@ -342,12 +344,10 @@ let styles = StyleSheet.create({
342 textAlign: 'center' 344 textAlign: 'center'
343 }, 345 },
344 banner: { 346 banner: {
345 - width: 234 * DEVICE_WIDTH_RATIO,  
346 - height: 73 * DEVICE_WIDTH_RATIO, 347 + width: width - 102.5 * DEVICE_WIDTH_RATIO - cellPadding*2,
  348 + height: 86 * DEVICE_WIDTH_RATIO,
347 backgroundColor: '#ffffff', 349 backgroundColor: '#ffffff',
348 - marginLeft: 5 * DEVICE_WIDTH_RATIO,  
349 - marginTop: 5 * DEVICE_WIDTH_RATIO,  
350 - marginRight: 5 * DEVICE_WIDTH_RATIO,  
351 - marginBottom: 10 * DEVICE_WIDTH_RATIO 350 + marginLeft: cellPadding,
  351 + marginTop: cellPadding,
352 } 352 }
353 }); 353 });
@@ -69,7 +69,7 @@ export default class HotCategoryList extends Component { @@ -69,7 +69,7 @@ export default class HotCategoryList extends Component {
69 <TouchableOpacity yh_exposureData={yh_exposureData} onPress={() => { 69 <TouchableOpacity yh_exposureData={yh_exposureData} onPress={() => {
70 this.props.onPressCategoryBMore && this.props.onPressCategoryBMore() 70 this.props.onPressCategoryBMore && this.props.onPressCategoryBMore()
71 }}> 71 }}>
72 - <View style={[styles.rowContainer, topMargin]}> 72 + <View style={[styles.rowContainer, topMargin, {justifyContent: 'center'}]}>
73 <Text style={styles.moreText}>MORE</Text> 73 <Text style={styles.moreText}>MORE</Text>
74 </View> 74 </View>
75 </TouchableOpacity> 75 </TouchableOpacity>
@@ -161,21 +161,20 @@ let styles = StyleSheet.create({ @@ -161,21 +161,20 @@ let styles = StyleSheet.create({
161 height: cellHeight, 161 height: cellHeight,
162 marginTop: cellPadding, 162 marginTop: cellPadding,
163 marginLeft: cellPadding, 163 marginLeft: cellPadding,
164 - justifyContent: 'center',  
165 alignItems: 'center', 164 alignItems: 'center',
166 backgroundColor: '#f5f7f6' 165 backgroundColor: '#f5f7f6'
167 }, 166 },
168 167
169 rowThumbnail: { 168 rowThumbnail: {
170 - width: 48 * DEVICE_WIDTH_RATIO,  
171 - height: 65 * DEVICE_WIDTH_RATIO 169 + width: 63 * DEVICE_WIDTH_RATIO,
  170 + height: 85 * DEVICE_WIDTH_RATIO,
172 }, 171 },
173 172
174 rowDefaultImageContainer: { 173 rowDefaultImageContainer: {
175 - width: 48 * DEVICE_WIDTH_RATIO,  
176 - height: 65 * DEVICE_WIDTH_RATIO, 174 + width: 63 * DEVICE_WIDTH_RATIO,
  175 + height: 85 * DEVICE_WIDTH_RATIO,
177 justifyContent: 'center', 176 justifyContent: 'center',
178 - alignItems: 'center' 177 + alignItems: 'center',
179 }, 178 },
180 179
181 rowDefaultImage: { 180 rowDefaultImage: {
@@ -184,9 +183,9 @@ let styles = StyleSheet.create({ @@ -184,9 +183,9 @@ let styles = StyleSheet.create({
184 }, 183 },
185 184
186 rowTextContainer: { 185 rowTextContainer: {
187 - width: 53 * DEVICE_WIDTH_RATIO, 186 + width: cellWidth,
188 height: 28 * DEVICE_WIDTH_RATIO, 187 height: 28 * DEVICE_WIDTH_RATIO,
189 - marginTop: 2 * DEVICE_WIDTH_RATIO 188 + marginTop: -5 * DEVICE_WIDTH_RATIO
190 }, 189 },
191 190
192 rowText: { 191 rowText: {
@@ -144,19 +144,18 @@ let styles = StyleSheet.create({ @@ -144,19 +144,18 @@ let styles = StyleSheet.create({
144 height: cellHeight, 144 height: cellHeight,
145 marginTop: cellPadding, 145 marginTop: cellPadding,
146 marginLeft: cellPadding, 146 marginLeft: cellPadding,
147 - justifyContent: 'center',  
148 alignItems: 'center', 147 alignItems: 'center',
149 backgroundColor: '#f5f7f6' 148 backgroundColor: '#f5f7f6'
150 }, 149 },
151 150
152 rowThumbnail: { 151 rowThumbnail: {
153 - width: 48 * DEVICE_WIDTH_RATIO,  
154 - height: 65 * DEVICE_WIDTH_RATIO 152 + width: 63 * DEVICE_WIDTH_RATIO,
  153 + height: 85 * DEVICE_WIDTH_RATIO
155 }, 154 },
156 155
157 rowDefaultImageContainer: { 156 rowDefaultImageContainer: {
158 - width: 48 * DEVICE_WIDTH_RATIO,  
159 - height: 65 * DEVICE_WIDTH_RATIO, 157 + width: 63 * DEVICE_WIDTH_RATIO,
  158 + height: 85 * DEVICE_WIDTH_RATIO,
160 justifyContent: 'center', 159 justifyContent: 'center',
161 alignItems: 'center' 160 alignItems: 'center'
162 }, 161 },
@@ -167,9 +166,9 @@ let styles = StyleSheet.create({ @@ -167,9 +166,9 @@ let styles = StyleSheet.create({
167 }, 166 },
168 167
169 rowTextContainer: { 168 rowTextContainer: {
170 - width: 53 * DEVICE_WIDTH_RATIO, 169 + width: cellWidth,
171 height: 28 * DEVICE_WIDTH_RATIO, 170 height: 28 * DEVICE_WIDTH_RATIO,
172 - marginTop: 2 * DEVICE_WIDTH_RATIO 171 + marginTop: -5 * DEVICE_WIDTH_RATIO
173 }, 172 },
174 173
175 rowText: { 174 rowText: {
@@ -91,7 +91,7 @@ export default class List extends Component { @@ -91,7 +91,7 @@ export default class List extends Component {
91 let bigPic = getSlicedUrl(src, 640, 640, 2); 91 let bigPic = getSlicedUrl(src, 640, 640, 2);
92 let tagImg = tagMap[category_name]; 92 let tagImg = tagMap[category_name];
93 if (!tagImg) { 93 if (!tagImg) {
94 - tagImg = "../../image/chaopin_icon.png"; 94 + tagImg = require('../../image/chaopin_icon.png');
95 } 95 }
96 let likeImg = isFavor == 'N'?require('../../image/wsc_icon.png'):require('../../image/sc_icon.png'); 96 let likeImg = isFavor == 'N'?require('../../image/wsc_icon.png'):require('../../image/sc_icon.png');
97 let isLike = isFavor == 'N'; 97 let isLike = isFavor == 'N';
@@ -102,7 +102,7 @@ export default class List extends Component { @@ -102,7 +102,7 @@ export default class List extends Component {
102 <View style={styles.container}> 102 <View style={styles.container}>
103 <View style={styles.sapatorView}/> 103 <View style={styles.sapatorView}/>
104 {this._renderHeader()} 104 {this._renderHeader()}
105 - <Image style={styles.image,{width: this.state.width, height: this.state.height}} source={{uri:bigPic}}> 105 + <Image style={[styles.image,{width: this.state.width, height: this.state.height}]} source={{uri:bigPic}}>
106 <Image style={styles.tagContainer} source={tagImg}> 106 <Image style={styles.tagContainer} source={tagImg}>
107 <Text style={styles.tagText}>{category_name}</Text> 107 <Text style={styles.tagText}>{category_name}</Text>
108 </Image> 108 </Image>