TopBar

Last Updated on : 2024-06-05 03:14:34download

Overview

TopBar is the top toolbar integrated in FullView by default. It is called ActionBar in Android and UINavigationBar in iOS.

The new version of TopBar unifies the code of the Android and iOS operating systems, and splits out three components, TopBar.Container, TopBar.Content, and TopBar.Action. If the height is self-defined, the three components can be used for combined construction.

In addition, the height of TopBar is adapted to Android and iOS respectively, which can be obtained through TopBar.height:

  • iPhoneX and above models: 88
  • Models below iPhoneX: 64
  • Android models: 56

Code demo

Note: for more information, see Demo.

Basic use

import React from "react"; import { View, Platform } from "react-native"; import { TYNative, TopBar } from "tuya-panel-kit"; const backIcon = Platform.OS === "ios" ? "backIos" : "backAndroid"; export default () => ( <View> {/* Split version */} <TopBar.Container background="#000"> <TopBar.Action name={backIcon} color="red" onPress={TYNative.Navigator.pop} /> <TopBar.Content title="Title" /> <TopBar.Action name="pen" color="yellow" onPress={TYNative.showDeviceMenu} /> </TopBar.Container> {/* Encapsulation version */} <TopBar style={{ marginTop: 24 }} background="#000" title="Title" color="red" actions={[ { name: "pen", color: "yellow", onPress: () => TYNative.showDeviceMenu(), }, ]} onBack={TYNative.Navigator.pop} /> </View> );

Gradient

import React from "react"; import { View, Platform } from "react-native"; import { TYNative, TopBar } from "tuya-panel-kit"; const backIcon = Platform.OS === "ios" ? "backIos" : "backAndroid"; const linearBackground = { stops: { "0%": "red", "100%": "yellow", }, }; const radialBackground = { stops: [ { offset: "0%", stopColor: "#ff0", stopOpacity: "1", }, { offset: "100%", stopColor: "#00f", stopOpacity: "1", }, ], }; export default () => ( <View> {/* Split version */} <TopBar.Container background={linearBackground}> <TopBar.Action name={backIcon} onPress={TYNative.Navigator.pop} /> <TopBar.Content title="Title" /> </TopBar.Container> {/* Encapsulation version */} <TopBar style={{ marginTop: 24 }} background={radialBackground} title="Title" onBack={TYNative.Navigator.pop} /> </View> );

Multi-Toolbar

import React from 'react'; import { View, Platform } from 'react-native'; import { TYNative, TopBar } from 'tuya-panel-kit'; const backIcon = Platform.OS === 'ios' ? 'backIos' : 'backAndroid'; export default () => ( <View> {/* Split version */} <TopBar.Container background="blue"> <TopBar.Action name={backIcon} onPress={TYNative.Navigator.pop} /> <TopBar.Action source="Timing" color="red" onPress={() => { TYNative.simpleTipDialog('click timing', () => {}); }} /> <TopBar.Content title="Very Very Very Very Very Long Title" subTitle="SubTitle" onPress={() => { TYNative.simpleTipDialog('click title', () => {}); }} /> {['plus', 'warning', 'edit'].map(v => ( <TopBar.Action key={v} name={v} onPress={() => { TYNative.simpleTipDialog(`click ${v}`, () => {}); }} /> ))} </TopBar.Container> {/* Encapsulation version */} <TopBar style={{ marginTop: 24 }} background="blue" title="Very Very Very Very Very Long Title" subTitle="SubTitle" onPress={() => TYNative.simpleTipDialog('click title', () => {})} leftActions={[{ name: backIcon, onPress: TYNative.Navigator.pop, }, { source: 'Timing', color: 'red', onPress: () => TYNative.simpleTipDialog('click timing', () => {}), }]} actions={['plus', 'warning', 'edit'].map(v => ({ name: v, onPress: () => TYNative.simpleTipDialog(`click ${v}`, () => {}), }))} /> </View );

TopBar.Container API

style

The container style of the top toolbar internally handles the three StatusBar situations of iOS versions below and above iPhoneX, and Android. You can also define your own style.

Type Required Default value
ViewPropTypes.style No null

contentStyle

The style of the container content of the top toolbar.

Type Required Default value
ViewPropTypes.style No null

background

The background of the top toolbar container, which can be a solid color or a gradient color. For the format of the gradient color, see LinearGradient or RadialGradient.

Type Required Default value
string or object No null

children

The child elements of the top toolbar container, usually TopBar.Action and TopBar.Content. TopBar.Container automatically adapts to the position of these two components.

Type Required Default value
any No null

TopBar.Action API

TopBar.Action is a main part of TopBar, which can be pictures, text, or IconFont. TopBar.Action will determine the type of action by itself based on the data source.

Note: If name or d has been set, IconFont will be rendered first.

style

TopBar.Action style.

Type Required Default value
ViewPropTypes.style No null

contentStyle

TopBar.Action content style, which can be pictures, text, or IconFont.

Type Required Default value
ImageStyleProps or Text.propTypes.style or IconFontProps No null

size

TopBar.Action IconFont size.

Type Required Default value
number No 26

spacing

The left and right margins of TopBar.Action.

Note: If you set the text type, spacing will be added to the action as an extra width.

Type Required Default value
number No 6

color

TopBar.Action content color, which can be the background color of the picture, text color, or IconFont color.

Type Required Default value
ColorPropType No #fff

source

TopBar.Action content.

  • String: rendering text components.
  • Value or web image: rendering image components.
  • Not exist: render an empty View.
Type Required Default value
string or number or { uri } No null

disabled

Whether to disable or not.

Type Required Default value
boolean No false

background

TopBar background, which can be a specified color or gradient color.

Type Required Default value
string or object No

children

TopBar.Action child element. If you do not enter it, TopBar.Action will automatically render the required child elements according to the type of source passed.

Type Required Default value
any No null

TopBar.Content API

TopBar.Content is the central content component of TopBar.

style

TopBar.Content style.

Type Required Default value
ViewPropTypes.style No null

color

TopBar.Content title and subtitle color. The subtitle color is the color with 0.6 transparency.

Type Required Default value
ColorPropType No #fff

title

TopBar.Content title.

Type Required Default value
string No ‘’

titleStyle

TopBar.Content title style.

Type Required Default value
Text.propTypes.style No null

subTitle

TopBar.Content subtitle.

Type Required Default value
string No ‘’

subTitleStyle

TopBar.Content subtitle style.

Type Required Default value
Text.propTypes.style No null

position

The position of TopBar.Content, which can be left-aligned, center-aligned and right-aligned.

Type Required Default value
enum: 'left','center','right' No center

children

The child element of TopBar.Content.

Type Required Default value
any No null

onPress

The click event of TopBar.Content.

Type Required Default value
() => void No null

TopBar API

TopBar is an encapsulated component that can be used when the degree of customization is low. In addition to the following parameters, TopBar props can also be inherited from TopBar.Content.

style

The container style of TopBar.Container internally handles the three StatusBar situations of iOS versions below and above iPhoneX, and Android. You can also define your own style of StatusBar.

Type Required Default value
ViewPropTypes.style No null

contentStyle

TopBar.Container container content style.

Type Required Default value
ViewPropTypes.style No null

background

TopBar.Container container background, which can be a specified color or gradient color. For the format of gradient color, see LinearGradient or RadialGradient.

Type Required Default value
string or object No None

color

TopBar.Action content color, which can be the background color of the picture, text color, or IconFont color.

Type Required Default value
ColorPropType No #fff

leftActions

The left toolbar configuration of TopBar. If it is null, it will render the default return buttons for iOS and Android.

Type Required Default value
array No null

actions

The right toolbar configuration of TopBar. The objects in the array will be passed to TopBar.Action as props.

Type Required Default value
array No null

onBack

Return event.

Type Required Default value
() => void No null