@chon/react-native-tabbar

mobile bottom tabbar using react-native

Usage no npm install needed!

<script type="module">
  import chonReactNativeTabbar from 'https://cdn.skypack.dev/@chon/react-native-tabbar';
</script>

README

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

Usage

import TabBar from 'react-native-xtabbar';

<TabBar style={styles.content}>
    <TabBar.Item
        icon={require('./image/start_normal.png')}
        selectedIcon={require('./image/start_hightlight.png')}
        onPress={() => {
            console.log("first onPress");
        }}
        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>

Screenshot