Overview

Mobile bottom tab bar using react-native,support android and ios. Pages won't be rendered when you switch to other tabs,also save the status of invisible pages.

Installation

First you need to install react-native-xtabbar:

npm install react-native-xtabbar --save

Props

Tabbar

| prop | value | required/optional | comment | | --- | --- | --- | --- | | onItemSelected | function | optional | this function will be called when the focus item changing | | navTextColor | color | optional | nav text normal color | | navTextColorSelected | color | optional | nav text selected color |

Tabbar.Item

| prop | value | required/optional | comment | | --- | --- | --- | --- | | icon | image source | required | the icon when item is not focus | | selectedIcon | image source | required | the icon when item is focus | | title | string | required | title of item | | onPress | function | optional | the function will be called when item is selected. you can also use Tabbar's onItemSelected function if you want to control press callback in one place. | | badge | number/string | optional | badge | | point (Thanks @WittBulter) | bool | optional | clipChildren performance |

Usage

import TabBar from 'react-native-xtabbar';

<TabBar
    style={styles.content}
    onItemSelected={(index) => {console.log(`current item's index is ${index}`);}}
>
    <TabBar.Item
        icon={require('./image/start_normal.png')}
        selectedIcon={require('./image/start_hightlight.png')}
        onPress={() => {
            // do sth
        }}
        badge={7}
        title='首页'>
        <View style={styles.text}>
            <Text style={{fontSize: 18}}>Home</Text>
        </View>
    </TabBar.Item>

    <TabBar.Item
        icon={require('./image/start_normal.png')}
        selectedIcon={require('./image/start_hightlight.png')}
        title='定位'>
        <View style={styles.text}>
            <Text style={{fontSize: 18}}>Location</Text>
        </View>
    </TabBar.Item>

    <TabBar.Item
        icon={require('./image/start_normal.png')}
        selectedIcon={require('./image/start_hightlight.png')}
        title='发现'>
        <View style={styles.text}>
            <Text style={{fontSize: 18}}>Find</Text>
        </View>
    </TabBar.Item>

    <TabBar.Item
        icon={require('./image/start_normal.png')}
        selectedIcon={require('./image/start_hightlight.png')}
        title='我'>
        <View style={styles.text}>
            <Text style={{fontSize: 18}}>Me</Text>
        </View>
    </TabBar.Item>
</TabBar>

TODO

~~TabBar.Item badge~~

Screenshot