fix(ImageHeader):优化ImageHeader图片头部组件组件

Author: hy916

packages/core/src/ImageHeader/README.md

@@ -4,7 +4,8 @@
 
 ### 1. 基础示例 ImageHeader
 
-```jsx
+<!--DemoStart-->
+```jsx mdx:preview&background=#bebebe29
 import React, { Component } from 'react';
 import { ImageHeader,Avatar } from '@uiw/react-native';
 import { View, Text } from 'react-native';
@@ -13,7 +14,7 @@ function Demo () {
   return (
   <ImageHeader
         safeBgColor='#010101'
-        headerHeight={150}
+        headerHeight={200}
         headerLeft={<></>}
       >
         <View style={{
@@ -65,6 +66,8 @@ function Demo () {
 }
 export default Demo
 ```
+<!--End-->
+
 ## ImageHeader 组件 API
 
 | 属性                  | 必填    | 说明                 | 类型                  | 默认值                      |
@@ -74,12 +77,13 @@ export default Demo
 | headerLeft            | `false` | 头部左侧内容         | `ReactNode`           |                             |
 | headerLeftColor       | `false` | 左侧返回键和字体颜色 | `string`              | `theme.colors.primaryColor` |
 | headerBackgroundColor | `false` | 头部背景颜色         | `string`              | `transparent`               |
-| headerBackgroundImg   | `true`  | 头部背景图片         | `ImageSourcePropType` |                             |
+| safeBgColor           | `true`  | 设置全局背景色         | `string`             |                             |
 | headerHeight          | `false` | 头部高度             | `number`              |                             |
 | onPress               | `false` | 左边图标点击事件     | `() => void`          |                             |
 | showLeft              | `false` | 是否显示左边图标     | `boolean`             | `true`                      |
+| statusBarStyle        | `false` | 设置状态栏颜色      | `'default' | 'dark-content' | 'light-content'` | `default` |
 
-## AnimateHeader 组件 API
+<!-- ## AnimateHeader 组件 API
 
 | 属性 | 必填 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- | --- |
@@ -93,4 +97,4 @@ export default Demo
 | headerLeftColor | `false` | 左侧返回键和字体颜色 | `string` | `theme.colors.primaryColor` |
 | headerBackgroundColor | `false` | 头部背景颜色 | `string` | `transparent` |
 | onPress | `false` | 左边按钮点击事件 | `() => void` |  |
-| showLeft | `false` | 是否显示左边图标 | `boolean` | `true` |
+| showLeft | `false` | 是否显示左边图标 | `boolean` | `true` | -->

packages/core/src/ImageHeader/index.tsx

@@ -1,6 +1,5 @@
 import React, { FC, PropsWithChildren, ReactNode } from 'react';
 import { Text, SafeAreaView, StatusBar, TouchableOpacity, View, Platform } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Theme } from '../theme';
 import { useTheme } from '@shopify/restyle';
 
@@ -37,7 +36,6 @@ export type ImageHeaderProps = PropsWithChildren<{
 
 const ImageHeader: FC<ImageHeaderProps> = (props) => {
   const theme = useTheme<Theme>();
-  const insets = useSafeAreaInsets();
 
   const {
     headerRight,
@@ -71,7 +69,7 @@ const ImageHeader: FC<ImageHeaderProps> = (props) => {
       <SafeAreaView style={{ width: '100%', height: headerHeight, backgroundColor: safeBgColor }}>
         <Flex
           style={{
-            paddingTop: isIOS ? insets.top + theme.spacing.x2 : theme.spacing.x5,
+            paddingTop: isIOS ? theme.spacing.x2 : theme.spacing.x5,
             paddingBottom: theme.spacing.x2,
             paddingRight: theme.spacing.x3,
             backgroundColor: headerBackgroundColor,

website/src/routes/menus.ts

@@ -43,7 +43,7 @@ export const componentMenus: MenuData[] = [
   { path: '/components/transitionImage', name: 'TransitionImage 图片过渡' },
   { path: '/components/verificationCode', name: 'VerificationCode  验证码倒计时组件' },
   { path: '/components/loginPage', name: 'LoginPage  登录页组件' },
-  { path: '/components/imageHeader', name: 'imageHeader  图片头部组件' },
+  { path: '/components/imageHeader', name: 'ImageHeader  图片头部组件' },
 
   { divider: true, name: 'Data Display 信息录入' },
   { path: '/components/checkbox', name: 'CheckBox 复选框' },