Skip to content

Commit 66ffa81

Browse files
xiaoyatongAlex-huxiyangxiaoyatong
authored
fix: 修改image的demo样式，适配 鸿蒙 (jdf2e#2311)
* feat(image): 鸿蒙&RN适配 * chore: entry * fix: eslint --------- Co-authored-by: huxiyang <[email protected]> Co-authored-by: xiaoyatong <[email protected]>
1 parent ec2b458 commit 66ffa81

File tree

5 files changed

+58
-27
lines changed

5 files changed

+58
-27
lines changed

‎src/packages/image/demos/taro/demo1.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import React from 'react'
2+
import Taro, { pxTransform } from '@tarojs/taro'
23
import { Image } from '@nutui/nutui-react-taro'
3-
import { pxTransform } from '@tarojs/taro'
44

55
const Demo1 = () => {
6+
const HARMONY =
7+
Taro.getEnv() === Taro.ENV_TYPE.HARMONYHYBRID ||
8+
Taro.getEnv() === Taro.ENV_TYPE.HARMONY
9+
610
const src =
711
'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png'
812
return (
913
<>
10-
<Image src={src} height={pxTransform(200)} />
14+
<Image src={src} height={HARMONY ? pxTransform(200) : 200} />
1115
</>
1216
)
1317
}

‎src/packages/image/demos/taro/demo2.tsx

+17-13
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,43 @@
11
import React from 'react'
2+
import Taro, { pxTransform } from '@tarojs/taro'
23
import { Image } from '@nutui/nutui-react-taro'
34
import { View } from '@tarojs/components'
4-
import { pxTransform } from '@tarojs/taro'
55

66
const Demo2 = () => {
7+
const HARMONY =
8+
Taro.getEnv() === Taro.ENV_TYPE.HARMONYHYBRID ||
9+
Taro.getEnv() === Taro.ENV_TYPE.HARMONY
10+
711
const src =
812
'https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png'
913
return (
1014
<>
1115
<View style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}>
12-
<View style={{ width: pxTransform(90) }}>
16+
<View style={{ width: HARMONY ? pxTransform(98) : 98 }}>
1317
<Image
1418
src={src}
1519
mode="aspectFit"
16-
width={pxTransform(80)}
17-
height={pxTransform(80)}
18-
radius={pxTransform(40)}
20+
width={HARMONY ? pxTransform(80) : 80}
21+
height={HARMONY ? pxTransform(80) : 80}
22+
radius={HARMONY ? pxTransform(40) : 40}
1923
/>
2024
</View>
21-
<View style={{ width: pxTransform(90) }}>
25+
<View style={{ width: HARMONY ? pxTransform(98) : 98 }}>
2226
<Image
2327
src={src}
2428
mode="scaleToFill"
25-
width={pxTransform(80)}
26-
height={pxTransform(80)}
27-
radius={pxTransform(40)}
29+
width={HARMONY ? pxTransform(80) : 80}
30+
height={HARMONY ? pxTransform(80) : 80}
31+
radius={HARMONY ? pxTransform(40) : 40}
2832
/>
2933
</View>
30-
<View style={{ width: pxTransform(90) }}>
34+
<View style={{ width: HARMONY ? pxTransform(98) : 98 }}>
3135
<Image
3236
src={src}
3337
mode="scaleToFill"
34-
width={pxTransform(80)}
35-
height={pxTransform(80)}
36-
radius={pxTransform(10)}
38+
width={HARMONY ? pxTransform(80) : 80}
39+
height={HARMONY ? pxTransform(80) : 80}
40+
radius={HARMONY ? pxTransform(10) : 10}
3741
/>
3842
</View>
3943
</View>

‎src/packages/image/demos/taro/demo5.tsx

+13-4
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
11
import React from 'react'
2+
import Taro, { pxTransform } from '@tarojs/taro'
23
import { Image } from '@nutui/nutui-react-taro'
3-
import { pxTransform } from '@tarojs/taro'
44
import { View } from '@tarojs/components'
55

66
const Demo5 = () => {
7+
const HARMONY =
8+
Taro.getEnv() === Taro.ENV_TYPE.HARMONYHYBRID ||
9+
Taro.getEnv() === Taro.ENV_TYPE.HARMONY
10+
711
return (
812
<>
913
<Image
1014
src="http://m.360buyimg.com/babel/s181x181_jfs/t1/210178/19/10205/31538/619bbcd9E5071aed5/8e1b7eb632aeed49.png"
11-
width={pxTransform(30)}
12-
height={pxTransform(30)}
15+
width={HARMONY ? pxTransform(30) : 30}
16+
height={HARMONY ? pxTransform(30) : 30}
1317
/>
14-
<View style={{ width: pxTransform(200), marginLeft: pxTransform(10) }}>
18+
<View
19+
style={{
20+
width: HARMONY ? pxTransform(200) : 200,
21+
marginLeft: HARMONY ? pxTransform(10) : 10,
22+
}}
23+
>
1524
雪纺衫女2021年春季新款洋气轻熟上衣
1625
</View>
1726
</>

‎src/packages/image/demos/taro/demo6.tsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
2+
import Taro, { pxTransform } from '@tarojs/taro'
23
import { Image } from '@nutui/nutui-react-taro'
34
import { View } from '@tarojs/components'
4-
import { pxTransform } from '@tarojs/taro'
55

66
const Demo6 = () => {
77
const src =
@@ -13,20 +13,27 @@ const Demo6 = () => {
1313
'widthFix',
1414
'heightFix',
1515
]
16+
const HARMONY =
17+
Taro.getEnv() === Taro.ENV_TYPE.HARMONYHYBRID ||
18+
Taro.getEnv() === Taro.ENV_TYPE.HARMONY
19+
1620
return (
1721
<>
1822
<View style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}>
1923
{modes.map((mode) => {
2024
return (
2125
<View
22-
style={{ width: pxTransform(90), height: pxTransform(90) }}
26+
style={{
27+
width: HARMONY ? pxTransform(90) : 90,
28+
height: HARMONY ? pxTransform(90) : 90,
29+
}}
2330
key={mode}
2431
>
2532
<Image
2633
src={src}
2734
mode={mode as any}
28-
width={pxTransform(80)}
29-
height={pxTransform(80)}
35+
width={HARMONY ? pxTransform(80) : 80}
36+
height={HARMONY ? pxTransform(80) : 80}
3037
/>
3138
</View>
3239
)

‎src/packages/image/demos/taro/demo7.tsx

+11-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
2+
import Taro, { pxTransform } from '@tarojs/taro'
23
import { Image } from '@nutui/nutui-react-taro'
34
import { View } from '@tarojs/components'
4-
import { pxTransform } from '@tarojs/taro'
55

66
const Demo7 = () => {
77
const src =
@@ -17,20 +17,27 @@ const Demo7 = () => {
1717
'bottom left',
1818
'bottom right',
1919
]
20+
const HARMONY =
21+
Taro.getEnv() === Taro.ENV_TYPE.HARMONYHYBRID ||
22+
Taro.getEnv() === Taro.ENV_TYPE.HARMONY
23+
2024
return (
2125
<>
2226
<View style={{ display: 'flex', flexWrap: 'wrap', flexDirection: 'row' }}>
2327
{modes.map((mode) => {
2428
return (
2529
<View
26-
style={{ width: pxTransform(90), height: pxTransform(90) }}
30+
style={{
31+
width: HARMONY ? pxTransform(90) : 90,
32+
height: HARMONY ? pxTransform(90) : 90,
33+
}}
2734
key={mode}
2835
>
2936
<Image
3037
src={src}
3138
mode={mode as any}
32-
width={pxTransform(80)}
33-
height={pxTransform(80)}
39+
width={HARMONY ? pxTransform(80) : 80}
40+
height={HARMONY ? pxTransform(80) : 80}
3441
/>
3542
</View>
3643
)

0 commit comments

Comments
 (0)