TopBar 顶部工具栏

TopBar 顶部工具栏

概述

TopBar是默认集成在FullView中的顶部工具栏,在安卓中也称为ActionBar, iOS 中称为UINavigationBar

涂鸦封装了常用的TopBar布局,左边是返回键,中间是标题,右边是菜单按钮,一般是用来控制设备的分享和改名之类的

TopBar的高度在安卓和 iOS 上分别做了适配,可以通过TopBar.TopBarHeight获取到TopBar的高度. 如果是 IPhoneX 以上机型,高度是 88, 其余 iOS 机型高度是 64, 安卓的 TopBar 高度是 56.

代码演示

基础使用

import React, { Component } from 'react'
import { View, StyleSheet } from 'react-native'
import { TYSdk, TopBar } from 'tuya-panel-kit'
import ExplorerLayout from '../components/ExplorerLayout'
import ControlBoolean from '../components/ControlBoolean'

const TYNative = TYSdk.native

export default class TopBarScene extends Component {
state = {
isLeftBack: true,
isRightMore: true,
isAlignCenter: true
}

_handleTopBarChange = tab => {
TYNative.simpleTipDialog(`press '${tab}'`, () => {})
}

_handleBoolChange = key => value => {
this.setState({ [key]: value })
}

renderContent = () => {
return (
<TopBar
style={styles.topBar}
textStyle={styles.topBarText}
centerText='Title'
isLeftBack={this.state.isLeftBack}
alignCenter={this.state.alignCenter}
isRightMore={this.state.isRightMore}
onChange={this._handleTopBarChange}
/>
)
}

renderPlayground = () => {
return (
<View>
<ControlBoolean
title='Toggle isLeftBack'
value={this.state.isLeftBack}
onValueChange={this._handleBoolChange('isLeftBack')}
/>
<ControlBoolean
title='Toggle isRightMore'
value={this.state.isRightMore}
onValueChange={this._handleBoolChange('isRightMore')}
/>
<ControlBoolean
title='Toggle isAlignCenter'
value={this.state.isAlignCenter}
onValueChange={this._handleBoolChange('isAlignCenter')}
/>
</View>
)
}

render() {
return (
<ExplorerLayout
renderContent={this.renderContent}
renderPlayground={this.renderPlayground}
/>
)
}
}

const styles = StyleSheet.create({
topBar: {
alignSelf: 'stretch',
backgroundColor: '#fff'
},

topBarText: {
color: '#333',
fontSize: 16,
backgroundColor: 'transparent'
}
})

效果:

API

TopBar的 PropsTypes 继承自ViewPropTypes

style

TopBar的样式

类型(Type) 必传(Required)
ViewProptypes.style

textStyle

TopBar中间文字的样式

类型(Type) 必传(Required)
Text.propTypes.style

isLeftBack

是否显示TopBar左边的返回键

类型(Type) 必传(Required)
bool

leftImage

TopBar左边的返回键的图片

类型(Type) 必传(Required)
number

leftText

TopBar左边的返回键的文字

类型(Type) 必传(Required)
string

centerText

TopBar中间的文字内容

类型(Type) 必传(Required)
string

rightText

TopBar右侧的文字内容

类型(Type) 必传(Required)
string

isRightMore

是否显示TopBar右侧的按键区域

类型(Type) 必传(Required)
bool

leftImage

TopBar右边的图片

类型(Type) 必传(Required)
number

onChange

左右按钮的点击事件

类型(Type) 必传(Required)
(tab) => {}, tab 的取值为’left’, 'right’中的一个,代表按下的左键或者右键

alignCenter

中间文字是否居中

类型(Type) 必传(Required) 平台(Platform)
bool Android

电话咨询

在线咨询

400-881-8611