TabView.md

<TabView /> 标签页

TabView 组件定义一个标签页组件, 用于在一个页面上显示多个子页面, 通过页面底部的 TabBar 切换子页面。

Props

Prop	Type	Default	Note
View props...			TabView 组件继承 View 组件的全部属性。
type	string	'projector'	标签页类型。 - projector: 幻灯机, 子页面使用<Projector />组件渲染 - carousel: 走马灯, 子页面使用<Carousel />组件渲染
barStyle	同View.style		TabBar 工具条样式。
activeIndex	number	0	活动 Sheet 序号。

Events

Event Name	Returns	Notes
View events...		TabView 组件继承 View 组件的全部事件。
onChange	index	改变当前页面时调用, index 为当前 Sheet 序号。

Static Props

Prop	Type	Default	Note
Sheet	class		标签页 Sheet 组件。
Button	class		标签页按钮组件。 此组件由 Sheet 组件自动渲染, 无须代码显式声明, 但可以修改 TabView.Button 为自定义类以更改标签页按钮组件。

<TabView.Sheet /> Props

Prop	Type	Default	Note
type	string	'sheet'	Sheet 类型。 - sheet: 页面 - button: 按钮
title	string number element		标题, 可以是字符串、数字或 React Native 组件。
icon	同Image.source element		按钮图标, 可以是 Image.source 或 React Native 组件。
activeIcon	同Image.source element		激活状态按钮图标, 可以是 Image.source 或 React Native 组件。
badge	string number element		徽章, 可以是字符串、数字或 React Native 组件, 为字符串、数字时使用 <Badge />组件渲染。

<TabView.Sheet /> Events

Event Name	Returns	Notes
onPress	event	Sheet 按钮点击事件, 触摸结束时调用, 与 TouchableOpacity.onPress 一致。

<TabView.Button /> Props

Prop	Type	Default	Note
TouchableOpacity props...			TabView.Button 组件继承 TouchableOpacity 组件的全部属性。
title	string number element		标题, 可以是字符串、数字或 React Native 组件。
titleStyle	同Text.style		标题样式, 当 title 类型为 element 时无效。
activeTitleStyle	同Text.style		激活状态标题样式, 当 title 类型为 element 时无效。
icon	同Image.source element		按钮图标, 可以是 Image.source 或 React Native 组件。
activeIcon	同Image.source element		激活状态按钮图标, 可以是 Image.source 或 React Native 组件。
badge	string number element		徽章, 可以是字符串、数字或 React Native 组件, 为字符串、数字时使用 <Badge /> 组件渲染。
active	bool	false	是否激活。

Example

简单用法

<TabView style={{flex: 1}} type='projector'>
  <TabView.Sheet
    title='Home'
    icon={require('../icons/home.png')}
    activeIcon={require('../icons/home_active.png')}
  >
    <YourHomePage />
  </TabView.Sheet>
  <TabView.Sheet
    title='Me'
    icon={require('../icons/me.png')}
    activeIcon={require('../icons/me_active.png')}
    badge={1}
  >
    <YourMePage />
  </TabView.Sheet>
</TabView>

Screenshots