Skip to content

Commit 3a7f686

Browse files
hy916hy916
committed
fix(ImageHeader): 优化ImageHeader组件，添加移动端文档和PC端文档
1 parent 30f11b3 commit 3a7f686

File tree

7 files changed

+129
-163
lines changed

7 files changed

+129
-163
lines changed

‎example/examples/src/routes/ImageHeader/index.tsx‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,59 @@
11
import React from 'react';
2-
import {ImageHeader, Icon, Flex, Text} from '@uiw/react-native';
2+
import {ImageHeader, Icon, Avatar, Text} from '@uiw/react-native';
33
import {ComProps} from '../../routes';
4-
import Layout, {Container} from '../../Layout';
5-
4+
import {View} from 'react-native';
65
export interface ImageHeaderProps extends ComProps {}
76

87
export default class ImageHeaderView extends React.Component<ImageHeaderProps> {
98
render() {
109
return (
1110
<ImageHeader
12-
headerBackgroundImg={{uri: 'https://c-ssl.duitang.com/uploads/blog/201411/18/20141118232436_zkQVV.jpeg'}}
13-
headerHeight={161}
14-
headerLeftColor="#FFF"
15-
headerLeft="返回"
16-
headerRight={<Icon name="delete" size={20} color={'##FFF'} />}
17-
statusBarStyle="dark-content">
18-
<Flex justify="center" style={{backgroundColor: 'white', height: 100, marginHorizontal: 20}}>
19-
<Text>111</Text>
20-
</Flex>
11+
safeBgColor="#010101"
12+
headerHeight={150}
13+
// headerTitle='我是title'
14+
// headerRight={<Icon name="delete" size={20} color={'#fff'} />}
15+
// headerLeftColor="#FFF"
16+
headerLeft={<></>}>
17+
<View
18+
style={{
19+
backgroundColor: '#010101',
20+
overflow: 'hidden',
21+
zIndex: 1,
22+
}}>
23+
<View
24+
style={{
25+
flexDirection: 'row',
26+
padding: 20,
27+
justifyContent: 'space-around',
28+
alignItems: 'center',
29+
}}>
30+
<View style={{flexDirection: 'row'}}>
31+
<Avatar style={{marginRight: 10}} size={70} shape="circle" src="https://avatars.githubusercontent.com/u/32630937?v=4" />
32+
<View style={{flexDirection: 'column'}}>
33+
<Text style={{fontSize: 17, color: '#fff', fontWeight: '500', lineHeight: 30}}>胡意(huyi)</Text>
34+
<Text
35+
style={{
36+
color: '#fff',
37+
fontSize: 14,
38+
fontWeight: '500',
39+
}}>
40+
96313241@qq.com
41+
</Text>
42+
<Text
43+
numberOfLines={1}
44+
ellipsizeMode="tail"
45+
style={{
46+
width: 240,
47+
color: '#fff',
48+
fontSize: 12,
49+
lineHeight: 25,
50+
}}>
51+
大屏素材库概要，集成一些常见的大屏组件及图表组件，统一样式。
52+
</Text>
53+
</View>
54+
</View>
55+
</View>
56+
</View>
2157
</ImageHeader>
2258
);
2359
}

‎packages/core/src/ImageHeader/README.md‎

Lines changed: 58 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,70 @@
1-
---
2-
title: ImageHeader - 图片头部组件
3-
nav:
4-
title: RN组件
5-
path: /react-native
6-
group:
7-
title: Display
8-
path: /display
9-
---
10-
111
# ImageHeader 图片头部组件
122

133
## 效果演示
144

15-
### 1. 普通 ImageHeader
16-
17-
```tsx | pure
18-
<ImageHeader headerBackgroundImg={require('../../assets/images/bg_rank.png')} headerHeight={px(161)} {...props}>
19-
<Flex justifyContent="center" backgroundColor="white" height={100}>
20-
<Text>111</Text>
21-
</Flex>
22-
</ImageHeader>
23-
```
24-
25-
<center>
26-
<figure>
27-
<img
28-
alt="header-ios1.png"
29-
src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1609999430064140139.png"
30-
style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
31-
/>
32-
</figure>
33-
</center>
34-
35-
### 2. ImageHeader 配置 left、right 和 headerLeftColor
36-
37-
```tsx | pure
38-
<ImageHeader
39-
headerBackgroundImg={require('../../assets/images/bg_rank.png')}
40-
headerHeight={px(161)}
41-
headerLeftColor={theme.colors.white}
42-
headerLeft="返回"
43-
headerRight={<Icon name="delete" size={px(20)} color={theme.colors.white} />}
44-
{...props}
45-
>
46-
<Flex justifyContent="center" backgroundColor="white" height={100}>
47-
<Text>111</Text>
48-
</Flex>
49-
</ImageHeader>
50-
```
51-
52-
<center>
53-
<figure>
54-
<img
55-
alt="header-ios2.png"
56-
src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1609999550703021067.png"
57-
style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
58-
/>
59-
</figure>
60-
</center>
5+
### 1. 基础示例 ImageHeader
616

62-
### 3. ImageHeader 配置 headerBackgroundColor
63-
64-
```tsx | pure
65-
<ImageHeader
66-
headerBackgroundImg={require('../../assets/images/bg_rank.png')}
67-
headerHeight={px(161)}
68-
headerBackgroundColor={theme.colors.white}
69-
headerLeft="返回"
70-
headerRight={<Icon name="delete" size={px(20)} color={theme.colors.white} />}
71-
{...props}
72-
>
73-
<Flex justifyContent="center" height={100}>
74-
<Text>111</Text>
75-
</Flex>
76-
</ImageHeader>
77-
```
78-
79-
<center>
80-
<figure>
81-
<img
82-
alt="header-ios3.png"
83-
src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1610000705310241428.png"
84-
style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
85-
/>
86-
</figure>
87-
</center>
88-
89-
### 4. AnimatedHeader
90-
91-
```tsx | pure
92-
import { useScrollHandler } from 'react-native-redash';
93-
import Animated from 'react-native-reanimated';
94-
95-
export default () => {
96-
const { scrollHandler, y } = useScrollHandler();
7+
```jsx
8+
import React, { Component } from 'react';
9+
import { ImageHeader,Avatar } from '@uiw/react-native';
10+
import { View, Text } from 'react-native';
9711

12+
function Demo () {
9813
return (
99-
<AnimateHeader
100-
scrollY={y}
101-
scrollHeight={200}
102-
headerTitle="测试啊啊啊啊啊"
103-
headerLeft="返回"
104-
headerBackgroundColor={theme.colors.white}
105-
{...props}
106-
headerRight={
107-
<TouchableOpacity activeOpacity={0.5} onPress={() => props.navigation.goBack()}>
108-
<Icon name="delete" size={px(20)} color={theme.colors.primaryColor} />
109-
</TouchableOpacity>
110-
}
111-
/>
112-
<Animated.ScrollView {...scrollHandler}>
113-
<ImageHeader
114-
headerBackgroundImg={require('../../assets/images/bg_rank.png')}
115-
headerHeight={px(161)}
116-
headerLeftColor={theme.colors.white}
117-
headerRight={
118-
<TouchableOpacity activeOpacity={0.5} onPress={() => props.navigation.goBack()}>
119-
<Icon name="delete" size={px(20)} color={theme.colors.primaryColor} />
120-
</TouchableOpacity>
121-
}
122-
{...props}
123-
>
124-
<Flex justifyContent="center" height={100}>
125-
<Text>111</Text>
126-
</Flex>
127-
</ImageHeader>
128-
<Box width={200} height={900} />
129-
</Animated.ScrollView>
130-
)
14+
<ImageHeader
15+
safeBgColor='#010101'
16+
headerHeight={150}
17+
headerLeft={<></>}
18+
>
19+
<View style={{
20+
backgroundColor: '#010101',
21+
overflow: 'hidden',
22+
zIndex: 1,
23+
}}>
24+
<View
25+
style={{
26+
flexDirection: 'row',
27+
padding: 20,
28+
justifyContent: 'space-around',
29+
alignItems: 'center',
30+
}}
31+
>
32+
<View style={{ flexDirection: 'row' }}>
33+
<Avatar style={{ marginRight: 10 }} size={70} shape="circle" src="https://avatars.githubusercontent.com/u/32630937?v=4" />
34+
<View style={{ flexDirection: 'column' }}>
35+
<Text style={{ fontSize: 17, color: '#fff', fontWeight: '500', lineHeight: 30 }}>
36+
胡意(huyi)
37+
</Text>
38+
<Text
39+
style={{
40+
color: '#fff',
41+
fontSize: 14,
42+
fontWeight: '500',
43+
}}
44+
>
45+
96313241@qq.com
46+
</Text>
47+
<Text
48+
numberOfLines={1}
49+
ellipsizeMode="tail"
50+
style={{
51+
width: 240,
52+
color: '#fff',
53+
fontSize: 12,
54+
lineHeight: 25,
55+
}}
56+
>
57+
大屏素材库概要，集成一些常见的大屏组件及图表组件，统一样式。
58+
</Text>
59+
</View>
60+
</View>
61+
</View>
62+
</View>
63+
</ImageHeader>
64+
);
13165
}
66+
export default Demo
13267
```
133-
134-
<center>
135-
<figure>
136-
<img
137-
alt="header-ios4.gif"
138-
src="https://td-dev-public.oss-cn-hangzhou.aliyuncs.com/maoyes-app/1608877076955547998.gif"
139-
style="width: 375px; margin-right: 10px; border: 1px solid #ddd;"
140-
/>
141-
</figure>
142-
</center>
143-
14468
## ImageHeader 组件 API
14569

14670
| 属性 | 必填 | 说明 | 类型 | 默认值 |

‎packages/core/src/ImageHeader/index.tsx‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
11
import React, { FC, PropsWithChildren, ReactNode } from 'react';
2-
import {
3-
Text,
4-
ImageBackground,
5-
ImageSourcePropType,
6-
StatusBar,
7-
TouchableOpacity,
8-
StyleProp,
9-
ViewStyle,
10-
} from 'react-native';
2+
import { Text, SafeAreaView, StatusBar, TouchableOpacity, View, Platform } from 'react-native';
113
import { useSafeAreaInsets } from 'react-native-safe-area-context';
124
import { Theme } from '../theme';
135
import { useTheme } from '@shopify/restyle';
@@ -29,8 +21,8 @@ export type ImageHeaderProps = PropsWithChildren<{
2921
headerLeftColor?: string;
3022
/** 头部底色，默认为透明 */
3123
headerBackgroundColor?: string;
32-
/** 头部背景图片 */
33-
headerBackgroundImg: ImageSourcePropType;
24+
/** 设置全局背景色 */
25+
safeBgColor?: string;
3426
/** 头部高度 */
3527
headerHeight?: number;
3628
/** 左侧点击事件 */
@@ -39,6 +31,7 @@ export type ImageHeaderProps = PropsWithChildren<{
3931
showLeft?: boolean;
4032
/** 头部title */
4133
headerTitle?: ReactNode;
34+
/** 设置状态栏颜色 */
4235
statusBarStyle?: 'default' | 'dark-content' | 'light-content';
4336
}>;
4437

@@ -51,13 +44,13 @@ const ImageHeader: FC<ImageHeaderProps> = (props) => {
5144
headerLeft,
5245
headerLeftColor = theme.colors.icon,
5346
headerBackgroundColor = theme.colors.transparent,
54-
headerBackgroundImg,
5547
headerHeight,
5648
children,
5749
onPress,
5850
showLeft = true,
5951
headerTitle,
6052
statusBarStyle = 'default',
53+
safeBgColor,
6154
} = props;
6255

6356
let DefaultHeaderLeft: ReactNode = <Icon name="left" size={px(20)} color={headerLeftColor} />;
@@ -68,11 +61,14 @@ const ImageHeader: FC<ImageHeaderProps> = (props) => {
6861
DefaultHeaderLeft = headerLeft;
6962
}
7063
}
64+
const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 70 : StatusBar.currentHeight;
7165

7266
return (
7367
<>
74-
<StatusBar barStyle={statusBarStyle} backgroundColor={headerBackgroundColor} />
75-
<ImageBackground source={headerBackgroundImg} style={{ width: '100%', height: headerHeight }}>
68+
<View style={{ height: STATUSBAR_HEIGHT, backgroundColor: safeBgColor }}>
69+
<StatusBar translucent backgroundColor={safeBgColor} barStyle={statusBarStyle} />
70+
</View>
71+
<SafeAreaView style={{ width: '100%', height: headerHeight, backgroundColor: safeBgColor }}>
7672
<Flex
7773
style={{
7874
paddingTop: isIOS ? insets.top + theme.spacing.x2 : theme.spacing.x5,
@@ -89,7 +85,7 @@ const ImageHeader: FC<ImageHeaderProps> = (props) => {
8985
<Box flex={1} />
9086
)}
9187
{typeof headerTitle === 'string' ? (
92-
<Text style={{ color: theme.colors.gray200, fontSize: px(16) }}>{headerTitle}</Text>
88+
<Text style={{ color: headerLeftColor, fontSize: px(16) }}>{headerTitle}</Text>
9389
) : (
9490
headerTitle
9591
)}
@@ -98,7 +94,7 @@ const ImageHeader: FC<ImageHeaderProps> = (props) => {
9894
</Box>
9995
</Flex>
10096
<WingBlank>{children}</WingBlank>
101-
</ImageBackground>
97+
</SafeAreaView>
10298
</>
10399
);
104100
};

‎packages/core/src/LoginPage/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ LoginPage 登录页
55
### 基础示例
66

77
<!--DemoStart-->
8-
```jsx mdx:preview&background=#bebebe29
8+
```jsx
99
import React,{Fragment} from 'react';
1010
import { View} from 'react-native';
1111
import { LoginPage } from '@uiw/react-native';

‎website/src/pages/components/imageHeader/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Preview from 'src/component/Preview';
2+
import md from '@uiw/react-native/lib/ImageHeader/README.md';
3+
4+
const DEMO = () => <Preview {...md} path="/packages/core/src/ImageHeader/README.md" />;
5+
export default DEMO;

‎website/src/routes/menus.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export const componentMenus: MenuData[] = [
4343
{ path: '/components/transitionImage', name: 'TransitionImage 图片过渡' },
4444
{ path: '/components/verificationCode', name: 'VerificationCode 验证码倒计时组件' },
4545
{ path: '/components/loginPage', name: 'LoginPage 登录页组件' },
46+
{ path: '/components/imageHeader', name: 'imageHeader 图片头部组件' },
4647

4748
{ divider: true, name: 'Data Display 信息录入' },
4849
{ path: '/components/checkbox', name: 'CheckBox 复选框' },

‎website/src/routes/router.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,10 @@ export const routeData = [
357357
path: '/docs/changelog',
358358
component: lazy(() => import('../pages/docs/changelog')),
359359
},
360+
{
361+
path: '/components/imageHeader',
362+
component: lazy(() => import('../pages/components/imageHeader')),
363+
},
360364
],
361365
},
362366
];

0 commit comments

Comments
 (0)