react-native的tabBar的实现

最新推荐文章于 2023-02-17 16:37:09 发布

weixin_30838921

最新推荐文章于 2023-02-17 16:37:09 发布

阅读量146

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/dragonh/p/6781699.html

本文介绍如何使用react-native-tab-navigator模块在React Native项目中实现TabBar导航功能。通过npm安装该模块并进行简单配置即可在Android应用中使用。文中提供了实现自定义TabBar的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在react-native中由于没有提供Android用的tabbar插件.所以引用别人写的一个功能模块来实现

实现步骤:

在项目目录里面来执行:npm install react-native-tab-navigator --save就可以导入这个模块.接下来就是在代码里实现.示例代码如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
} from 'react-native';

//引入tabbar支持包
import TabNavigator from 'react-native-tab-navigator';

const TabNavigatorItem = TabNavigator.Item;

const TAB_NORMAL_1 = require('./images/footer0.png');
const TAB_NORMAL_2 = require('./images/footer1.png');
const TAB_NORMAL_3 = require('./images/footer2.png');
const TAB_NORMAL_4 = require('./images/footer3.png');

const TAB_PRESS_1 = require('./images/footer0-ax.png');
const TAB_PRESS_2 = require('./images/footer1-ax.png');
const TAB_PRESS_3 = require('./images/footer3-ax.png');
const TAB_PRESS_4 = require('./images/footer4-ax.png');

class MovieAndBook extends Component {

    constructor() {
        super();
        this.state = {
            selectedTab: 'Home',
        }
    }

    /**
     tab点击方法
     **/
    onPress(tabName) {
        if (tabName) {
            this.setState(
                {
                    selectedTab: tabName,
                }
            );
        }
    }

    /**
     渲染每项
     **/
    renderTabView(title, tabName, tabContent, isBadge) {
        var tabNomal;
        var tabPress;
        switch (tabName) {
            case 'Home':
                tabNomal = TAB_NORMAL_1;
                tabPress = TAB_PRESS_1;
                break;
            case 'Video':
                tabNomal = TAB_NORMAL_2;
                tabPress = TAB_PRESS_2;
                break;
            case 'Follow':
                tabNomal = TAB_NORMAL_3;
                tabPress = TAB_PRESS_3;
                break;
            case 'Mine':
                tabNomal = TAB_NORMAL_4;
                tabPress = TAB_PRESS_4;
                break;
            default:

        }
        return (
            <TabNavigatorItem
                title={title}
                renderIcon={() => <Image style={styles.tabIcon} source={tabNomal}/>}
                renderSelectedIcon={() => <Image style={styles.tabIcon} source={tabPress}/>}
                selected={this.state.selectedTab === tabName}
                selectedTitleStyle={{color: '#f85959'}}
                onPress={() => this.onPress(tabName)}
                renderBadge={() => isBadge ?
                    <View style={styles.badgeView}><Text style={styles.badgeText}>15</Text></View> : null}
            >
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}><Text>{tabContent}</Text></View>
            </TabNavigatorItem>
        );
    }

    /**
     自定义tabbar
     **/
    tabBarView() {
        return (
            <TabNavigator
                tabBarStyle={styles.tab}
            >
                {this.renderTabView('头条', 'Home', '头条板块', true)}
                {this.renderTabView('视频', 'Video', '视频板块', false)}
                {this.renderTabView('关注', 'Follow', '关注板块', false)}
                {this.renderTabView('我的', 'Mine', '我的板块', false)}
            </TabNavigator>
        );
    }


    render() {
        var tabBarView = this.tabBarView();
        return (
            <View style={styles.container}>
                {tabBarView}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    tab: {
        height: 52,
        alignItems: 'center',
        backgroundColor: '#f4f5f6',
    },
    tabIcon: {
        width: 25,
        height: 25,
    },
    badgeView: {
        width: 22,
        height: 14,
        backgroundColor: '#f85959',
        borderWidth: 1,
        marginLeft: 10,
        marginTop: 3,
        borderColor: '#FFF',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 8,
    },
    badgeText: {
        color: '#fff',
        fontSize: 8,
    }
});

AppRegistry.registerComponent('MovieAndBook', () => MovieAndBook);