react-native笔记（二）：配置底部tabbar

tabbar几乎是每个移动应用都必不可少的组件之一

今天实现这个组件用的是react-native-tab-navigator

先安装下来

npm install react-native-tab-navigator

npm install react-native-tab-navigator

单独新建一个文件tabbar.js

import React,{Component} from 'react';

//  引入react-native-tab-navigator
import TabNavigator from 'react-native-tab-navigator';

//首页
import Home from '../pages/home'
//个人中心
import Me from '../pages/me'

import {
    StyleSheet,
    Image
} from 'react-native';

class Tabbar extends Component {
    constructor(){
        super();
        this.state = {
            selectedTab: 'Home',//默认显示首页
        }
    }

    render() {
        return( 
                <TabNavigator hidesTabTouch={true} tabBarStyle={styles.tabbar}>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Home'}
                        title="首页"
                        selectedTitleStyle={styles.font}
                        renderIcon={() => <Image style={styles.img}  source={require('../assets/home.png')} />}
                        renderSelectedIcon={() => <Image style={styles.img} source={require('../assets/home_s.png')} />}
                        onPress={() => this.setState({ selectedTab: 'Home' })}>
                        // 首页以子组件方式放到tabbar.item节点标签内
                        <Home/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Me'}
                        title="我的"
                        selectedTitleStyle={styles.font}
                        renderIcon={() => <Image style={styles.img} source={require('../assets/me.png')} />}
                        renderSelectedIcon={() => <Image style={styles.img} source={require('../assets/me_s.png')} />}
                        onPress={() => this.setState({selectedTab: 'Me' })}>
                        // 个人中心以子组件方式放到tabbar.item节点标签内
                        <Me/>
                    </TabNavigator.Item>
                </TabNavigator>
        )
    }
}

const styles = StyleSheet.create({
    img: {
        width: 24,
        height: 24
    },
    font: {
        color: '#fc5531'
    },
    tabbar: {
        backgroundColor: 'white',
        borderColor: 'white'
    }
})
export default Tabbar;

import React,{Component} from 'react';

//  引入react-native-tab-navigator
import TabNavigator from 'react-native-tab-navigator';

//首页
import Home from '../pages/home'
//个人中心
import Me from '../pages/me'

import {
    StyleSheet,
    Image
} from 'react-native';

class Tabbar extends Component {
    constructor(){
        super();
        this.state = {
            selectedTab: 'Home',//默认显示首页
        }
    }

    render() {
        return( 
                <TabNavigator hidesTabTouch={true} tabBarStyle={styles.tabbar}>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Home'}
                        title="首页"
                        selectedTitleStyle={styles.font}
                        renderIcon={() => <Image style={styles.img}  source={require('../assets/home.png')} />}
                        renderSelectedIcon={() => <Image style={styles.img} source={require('../assets/home_s.png')} />}
                        onPress={() => this.setState({ selectedTab: 'Home' })}>
                        // 首页以子组件方式放到tabbar.item节点标签内
                        <Home/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === 'Me'}
                        title="我的"
                        selectedTitleStyle={styles.font}
                        renderIcon={() => <Image style={styles.img} source={require('../assets/me.png')} />}
                        renderSelectedIcon={() => <Image style={styles.img} source={require('../assets/me_s.png')} />}
                        onPress={() => this.setState({selectedTab: 'Me' })}>
                        // 个人中心以子组件方式放到tabbar.item节点标签内
                        <Me/>
                    </TabNavigator.Item>
                </TabNavigator>
        )
    }
}

const styles = StyleSheet.create({
    img: {
        width: 24,
        height: 24
    },
    font: {
        color: '#fc5531'
    },
    tabbar: {
        backgroundColor: 'white',
        borderColor: 'white'
    }
})
export default Tabbar;

然后入口页引用，我的是app.js

import Tabbar from './layout/tabbar'

const App = () => {
    return (
        <SafeAreaView 
        style={{backgroundColor:'#fff',
        width: '100%',
        height: '100%'}}
        >
            <Tabbar/>
        </SafeAreaView>
    );
};

import Tabbar from './layout/tabbar'

const App = () => {
    return (
        <SafeAreaView 
        style={{backgroundColor:'#fff',
        width: '100%',
        height: '100%'}}
        >
            <Tabbar/>
        </SafeAreaView>
    );
};

然后运行项目

如下图所示，就配置成功了

本文到此结束。

反馈信息

INFO

邮箱： open_teams@163.com

react-native笔记（二）：配置底部tabbar ​

反馈信息 ​

react-native笔记（二）：配置底部tabbar

反馈信息