mobile / YH_RNComponent · Commits

Go to a project

Authored by 王海元
Commit e842d0794c9ceb2c6fc22949919f7b4e5aeaebb2 1 parent ae58a0c5

UI 适配 --review by 孙凯

Inline Side-by-side
Showing 5 changed files with 42 additions and 22 deletions
@@ -158,7 +158,7 @@ export default class GroupDetailHeader extends React.Component { @@ -158,7 +158,7 @@ export default class GroupDetailHeader extends React.Component {
158 return ( 158 return (
159 <View style={styles.container}> 159 <View style={styles.container}>
160 <View style={styles.detail}> 160 <View style={styles.detail}>
161 - <View style={styles.subdetail}> 161 + <View style={Platform.OS === 'ios' ? styles.subdetail : styles.subDetailA}>
162 <View style={styles.headerList}> 162 <View style={styles.headerList}>
163 <HeaderList resource={membershipItems} lackNum={lackNum}/> 163 <HeaderList resource={membershipItems} lackNum={lackNum}/>
164 </View> 164 </View>
@@ -260,6 +260,16 @@ let styles = StyleSheet.create({ @@ -260,6 +260,16 @@ let styles = StyleSheet.create({
260 alignItems: 'center', 260 alignItems: 'center',
261 backgroundColor: 'white', 261 backgroundColor: 'white',
262 }, 262 },
  263 + subDetailA: {
  264 + flex: 1,
  265 + width: width - 30*DEVICE_WIDTH_RATIO,
  266 + borderLeftWidth: 1,
  267 + borderRightWidth: 1,
  268 + borderBottomWidth: 1,
  269 + borderColor: 'rgba(0,0,0,0.1)',
  270 + alignItems: 'center',
  271 + backgroundColor: 'white',
  272 + },
263 headerList: { 273 headerList: {
264 marginTop: 107*DEVICE_WIDTH_RATIO, 274 marginTop: 107*DEVICE_WIDTH_RATIO,
265 width: width - 30*DEVICE_WIDTH_RATIO, 275 width: width - 30*DEVICE_WIDTH_RATIO,
@@ -100,6 +100,7 @@ let styles = StyleSheet.create({ @@ -100,6 +100,7 @@ let styles = StyleSheet.create({
100 shadowOffset: {width: 0, height: 5}, 100 shadowOffset: {width: 0, height: 5},
101 shadowOpacity: 0.5, 101 shadowOpacity: 0.5,
102 shadowRadius: 5, 102 shadowRadius: 5,
  103 + elevation: 1,
103 flexDirection: 'row', 104 flexDirection: 'row',
104 backgroundColor: 'white', 105 backgroundColor: 'white',
105 }, 106 },
@@ -133,7 +134,7 @@ let styles = StyleSheet.create({ @@ -133,7 +134,7 @@ let styles = StyleSheet.create({
133 alignItems: 'center', 134 alignItems: 'center',
134 }, 135 },
135 subPrice1: { 136 subPrice1: {
136 - fontSize: 10, 137 + fontSize: 10*DEVICE_WIDTH_RATIO,
137 color: '#B0B0B0', 138 color: '#B0B0B0',
138 lineHeight: 10*DEVICE_WIDTH_RATIO, 139 lineHeight: 10*DEVICE_WIDTH_RATIO,
139 }, 140 },
@@ -154,12 +155,12 @@ let styles = StyleSheet.create({ @@ -154,12 +155,12 @@ let styles = StyleSheet.create({
154 }, 155 },
155 iconText: { 156 iconText: {
156 color: 'white', 157 color: 'white',
157 - fontSize: 9, 158 + fontSize: 9*DEVICE_WIDTH_RATIO,
158 textAlign: 'center', 159 textAlign: 'center',
159 }, 160 },
160 161
161 price1: { 162 price1: {
162 - fontSize: 18, 163 + fontSize: 18*DEVICE_WIDTH_RATIO,
163 marginLeft: 10*DEVICE_WIDTH_RATIO, 164 marginLeft: 10*DEVICE_WIDTH_RATIO,
164 color: '#444444', 165 color: '#444444',
165 lineHeight: 18*DEVICE_WIDTH_RATIO, 166 lineHeight: 18*DEVICE_WIDTH_RATIO,
@@ -168,19 +169,19 @@ let styles = StyleSheet.create({ @@ -168,19 +169,19 @@ let styles = StyleSheet.create({
168 169
169 oldPriceContainer: { 170 oldPriceContainer: {
170 flexDirection: 'row', 171 flexDirection: 'row',
171 - height: 12,  
172 - marginTop: 2, 172 + height: 12*DEVICE_WIDTH_RATIO,
  173 + marginTop: 2*DEVICE_WIDTH_RATIO,
173 }, 174 },
174 175
175 price2: { 176 price2: {
176 - fontSize: 12,  
177 - lineHeight: 12, 177 + fontSize: 12*DEVICE_WIDTH_RATIO,
  178 + lineHeight: 12*DEVICE_WIDTH_RATIO,
178 color: '#B0B0B0', 179 color: '#B0B0B0',
179 alignItems: 'center', 180 alignItems: 'center',
180 }, 181 },
181 deleteLine: { 182 deleteLine: {
182 position: 'absolute', 183 position: 'absolute',
183 - top: (16 / 2) - 3, 184 + top: (16*DEVICE_WIDTH_RATIO / 2) - 3,
184 left: 0, 185 left: 0,
185 right: 0, 186 right: 0,
186 height: 1, 187 height: 1,
@@ -74,6 +74,8 @@ export default class GroupProductCell extends React.Component { @@ -74,6 +74,8 @@ export default class GroupProductCell extends React.Component {
74 </View> 74 </View>
75 </View> 75 </View>
76 </View> 76 </View>
  77 + <View style={styles.line}/>
  78 +
77 </TouchableOpacity> 79 </TouchableOpacity>
78 </View> 80 </View>
79 ); 81 );
@@ -139,12 +141,12 @@ let styles = StyleSheet.create({ @@ -139,12 +141,12 @@ let styles = StyleSheet.create({
139 }, 141 },
140 iconText: { 142 iconText: {
141 color: 'white', 143 color: 'white',
142 - fontSize: 8, 144 + fontSize: 8*DEVICE_WIDTH_RATIO,
143 textAlign: 'center', 145 textAlign: 'center',
144 }, 146 },
145 147
146 price1: { 148 price1: {
147 - fontSize: 18, 149 + fontSize: 18*DEVICE_WIDTH_RATIO,
148 marginLeft: 10*DEVICE_WIDTH_RATIO, 150 marginLeft: 10*DEVICE_WIDTH_RATIO,
149 color: '#444444', 151 color: '#444444',
150 lineHeight: 18*DEVICE_WIDTH_RATIO, 152 lineHeight: 18*DEVICE_WIDTH_RATIO,
@@ -158,8 +160,8 @@ let styles = StyleSheet.create({ @@ -158,8 +160,8 @@ let styles = StyleSheet.create({
158 }, 160 },
159 161
160 price2: { 162 price2: {
161 - fontSize: 12,  
162 - lineHeight: 12, 163 + fontSize: 12*DEVICE_WIDTH_RATIO,
  164 + lineHeight: 12*DEVICE_WIDTH_RATIO,
163 color: '#B0B0B0', 165 color: '#B0B0B0',
164 alignItems: 'center', 166 alignItems: 'center',
165 }, 167 },
@@ -176,7 +178,7 @@ let styles = StyleSheet.create({ @@ -176,7 +178,7 @@ let styles = StyleSheet.create({
176 }, 178 },
177 179
178 buttonBackImage: { 180 buttonBackImage: {
179 - width: 120*DEVICE_WIDTH_RATIO, 181 + width: 120*DEVICE_WIDTH_RATIO + 2,
180 height: 30*DEVICE_WIDTH_RATIO, 182 height: 30*DEVICE_WIDTH_RATIO,
181 flexDirection: 'row', 183 flexDirection: 'row',
182 alignItems: 'center', 184 alignItems: 'center',
@@ -188,20 +190,26 @@ let styles = StyleSheet.create({ @@ -188,20 +190,26 @@ let styles = StyleSheet.create({
188 justifyContent: 'center', 190 justifyContent: 'center',
189 }, 191 },
190 button1: { 192 button1: {
191 - fontSize: 12, 193 + fontSize: 12*DEVICE_WIDTH_RATIO,
192 color: '#D0021B', 194 color: '#D0021B',
193 }, 195 },
194 button2: { 196 button2: {
195 - fontSize: 12, 197 + fontSize: 12*DEVICE_WIDTH_RATIO,
196 color: 'white', 198 color: 'white',
197 }, 199 },
198 200
199 deleteLine: { 201 deleteLine: {
200 position: 'absolute', 202 position: 'absolute',
201 - top: (12 / 2) - 0.8, 203 + top: (12*DEVICE_WIDTH_RATIO / 2) - 0.8,
202 left: 0, 204 left: 0,
203 right: 0, 205 right: 0,
204 height: 1, 206 height: 1,
205 backgroundColor: '#b0b0b0', 207 backgroundColor: '#b0b0b0',
206 }, 208 },
  209 + line: {
  210 + width,
  211 + height: 1,
  212 + marginLeft: 15*DEVICE_WIDTH_RATIO,
  213 + backgroundColor: '#E0E0E0',
  214 + },
207 }); 215 });
@@ -79,21 +79,21 @@ let styles = StyleSheet.create({ @@ -79,21 +79,21 @@ let styles = StyleSheet.create({
79 width: 305*DEVICE_WIDTH_RATIO, 79 width: 305*DEVICE_WIDTH_RATIO,
80 height: 88*DEVICE_WIDTH_RATIO, 80 height: 88*DEVICE_WIDTH_RATIO,
81 marginTop: 25*DEVICE_WIDTH_RATIO, 81 marginTop: 25*DEVICE_WIDTH_RATIO,
82 - backgroundColor: 'red',  
83 }, 82 },
84 buttons: { 83 buttons: {
85 width, 84 width,
86 height: 115*DEVICE_WIDTH_RATIO, 85 height: 115*DEVICE_WIDTH_RATIO,
87 alignItems: 'center', 86 alignItems: 'center',
88 flexDirection: 'row', 87 flexDirection: 'row',
  88 + justifyContent: 'space-around',
89 }, 89 },
90 button1: { 90 button1: {
91 - marginLeft: 90*DEVICE_WIDTH_RATIO, 91 + // marginLeft: 90*DEVICE_WIDTH_RATIO,
92 alignItems: 'center', 92 alignItems: 'center',
93 }, 93 },
94 94
95 button2: { 95 button2: {
96 - marginLeft: 105*DEVICE_WIDTH_RATIO, 96 + marginLeft: -10*DEVICE_WIDTH_RATIO,
97 alignItems: 'center', 97 alignItems: 'center',
98 }, 98 },
99 icon: { 99 icon: {
@@ -389,15 +389,16 @@ let styles = StyleSheet.create({ @@ -389,15 +389,16 @@ let styles = StyleSheet.create({
389 width, 389 width,
390 height: 115*DEVICE_WIDTH_RATIO, 390 height: 115*DEVICE_WIDTH_RATIO,
391 alignItems: 'center', 391 alignItems: 'center',
  392 + justifyContent: 'space-around',
392 flexDirection: 'row', 393 flexDirection: 'row',
393 }, 394 },
394 button1: { 395 button1: {
395 - marginLeft: 90*DEVICE_WIDTH_RATIO, 396 + // marginLeft: 90*DEVICE_WIDTH_RATIO,
396 alignItems: 'center', 397 alignItems: 'center',
397 }, 398 },
398 399
399 button2: { 400 button2: {
400 - marginLeft: 105*DEVICE_WIDTH_RATIO, 401 + marginLeft: -10*DEVICE_WIDTH_RATIO,
401 alignItems: 'center', 402 alignItems: 'center',
402 }, 403 },
403 icon: { 404 icon: {