Tabs
Tab Component is used to switch between different views in your application. Generally a Tabs
should have 2-4 tab pane, the title of each tab pane should be concise, normally has 2-4 words.
import React from 'react'
import { View } from 'react-native'
import { Tabs } from 'antd-mobile-rn'
var view = function () {
const {tabs} = this.props
return (
<Tabs
{...this.props}
tabs={tabs.map((item, index) => {return {title: item.title, key: index}})}>
{
tabs.map((item, index) => {
return (
<View key={index}>{item.content}</View>
)
})
}
</Tabs>
)
}
module.exports = view
Above code block is the representation of Tab Component in Arivaa. You can see how we are receiving tab's data as props, which gets rendered via map function and give us complete tab view in the application.
Usage
In order to use Tabs component in your application, simply import Arivaa Tab Component (like we did at line no. 3) and pass tabs data as shown below.
import React from 'react'
import { View, Text } from 'react-native'
import Tabs from '../index'
var view = function () {
const tabs = [
{
title: 'First Tab',
content: <View><Text>First Tab Content</Text></View>
},
{
title: 'Second Tab',
content: <Text>Second Tab Content</Text>
},
{
title: 'Third Tab',
content: <Text>Third Tab Content</Text>
}
]
return (
<View>
<Tabs
tabs={tabs}
tabBarBackgroundColor="#fff"
tabBarUnderlineStyle={{backgroundColor: Colors.primaryColor}}
tabBarActiveTextColor={Colors.primaryColor}
/>
</View>
)
}
module.exports = view
Supported properties
Properties | Descrition | Type | Default | Required |
---|---|---|---|---|
tabs |
It is a array of objects featuring title (title of Tab) and content (renderable content of that specific tab). |
array | true | |
tabBarPosition | TabBar's position | 'top', 'bottom', 'left', 'right' | top | false |
initialPage | the tab when inital, index or key | number | string | false | |
tabBarbackgroundColor |
color of the default tab bar's background |
string | false | |
tabBarunderlineStyle |
style of the default tab bar's underline | string | false | |
tabBarActiveTextColor |
color of the default tab bar's text when active | string | false | |
tabBarInactiveTextColor | color of the default tab bar's text when inactive | string | false | |
tabBarTextStyle | styles to the tab bar's text | React.CSSProperties |any | false |