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 (
      
    )
  }

  renderPlayground = () => {
    return (
      
        
        
        
      
    )
  }

  render() {
    return (
      
    )
  }
}

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

TopBar 顶部工具栏