@uiw/react-native

Version:

UIW for React Native

uiwjs.github.io/react-native-uiw/

uiwjs/react-native-uiw

101 lines (92 loc) • 4.37 kB

Markdown

View Raw

100

101

# ImageHeader 图片头部组件 ## 效果演示 ### 1. 基础示例 ImageHeader  ```jsx mdx:preview&background=#bebebe29 import React, { Component } from 'react'; import { ImageHeader,Avatar } from '@uiw/react-native'; import { View, Text } from 'react-native'; function Demo () { return ( <ImageHeader safeBgColor='#010101' headerHeight={200} headerLeft={<></>} > <View style={{ backgroundColor: '#010101', overflow: 'hidden', zIndex: 1, }}> <View style={{ flexDirection: 'row', padding: 20, justifyContent: 'space-around', alignItems: 'center', }} > <View style={{ flexDirection: 'row' }}> <Avatar style={{ marginRight: 10 }} size={70} shape="circle" src="https://avatars.githubusercontent.com/u/32630937?v=4" /> <View style={{ flexDirection: 'column' }}> <Text style={{ fontSize: 17, color: '#fff', fontWeight: '500', lineHeight: 30 }}> 胡意(huyi) </Text> <Text style={{ color: '#fff', fontSize: 14, fontWeight: '500', }} > 96313241@qq.com </Text> <Text numberOfLines={1} ellipsizeMode="tail" style={{ width: 240, color: '#fff', fontSize: 12, lineHeight: 25, }} > 大屏素材库概要，集成一些常见的大屏组件及图表组件，统一样式。 </Text> </View> </View> </View> </View> </ImageHeader> ); } export default Demo ```  ## ImageHeader 组件 API | 属性 | 必填 | 说明 | 类型 | 默认值 | | --------------------- | ------- | -------------------- | --------------------- | --------------------------- | | headerTitle | `false` | 头部文字 | `ReactNode` | | | headerRight | `false` | 头部右侧内容 | `ReactNode` | | | headerLeft | `false` | 头部左侧内容 | `ReactNode` | | | headerLeftColor | `false` | 左侧返回键和字体颜色 | `string` | `theme.colors.primaryColor` | | headerBackgroundColor | `false` | 头部背景颜色 | `string` | `transparent` | | safeBgColor | `true` | 设置全局背景色 | `string` | | | headerHeight | `false` | 头部高度 | `number` | | | onPress | `false` | 左边图标点击事件 | `() => void` | | | showLeft | `false` | 是否显示左边图标 | `boolean` | `true` | | statusBarStyle | `false` | 设置状态栏颜色 | `'default' | 'dark-content' | 'light-content'` | `default` |