react-native开发实例之navbar

navbar组件在客户端开发中是必备技能，使用react-native开发adr/ios通用的navbar十分简单，下面我通过使用开源组件快速的实现。

• 项目开源地址
  https://github.com/exponentjs/react-native-tab-navigator

• 使用代码添加组件

npm install react-native-tab-navigator --save

• 核心代码如下

import React, {Component} from 'react';

import {
    Navigator,
    StyleSheet,
    Image,
    TouchableOpacity,
    View,
    Text
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import ApartmentListPage from './ApartmentListPage';
import ServiceListPage from './ServiceListPage';
import CustomerPage from './CustomerPage';
import ProfilePage from './ProfilePage';


const tab1 = {
    key: 'apartment',
    title: '公寓',
    img: require('../images/icon_tabbar_1.png'),
    img_on: require('../images/icon_tabbar_1_on.png'),
};

const tab2 = {
    key: 'service',
    title: '老人服务',
    img: require('../images/icon_tabbar_2.png'),
    img_on: require('../images/icon_tabbar_2_on.png'),
};


const tab3 = {
    key: 'customer',
    title: '客服咨询',
    img: require('../images/icon_tabbar_3.png'),
    img_on: require('../images/icon_tabbar_3_on.png'),
};


const tab4 = {
    key: 'profile',
    title: '我的',
    img: require('../images/icon_tabbar_4.png'),
    img_on: require('../images/icon_tabbar_4_on.png'),
};


export default class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {selectedTab: tab1.key}
    }

    _renderTabItem(tabJson, Comp) {

        return (
            <TabNavigator.Item
                selectedTitleStyle={styles.tabTitleStyle}
                title={tabJson.title}
                selected={this.state.selectedTab === tabJson.key}
                renderIcon={() => <Image style={styles.tabIcon} source={tabJson.img}/>}
                renderSelectedIcon={() => <Image style={styles.tabIcon} source={tabJson.img_on}/>}
                onPress={() => this.setState({selectedTab: tabJson.key})}>
                {Comp}
            </TabNavigator.Item>
        );
    }


    render() {
        return (
            <View style={{flex: 1}}>
                <TabNavigator hidesTabTouch={true} tabBarStyle={styles.tab}>
                    {this._renderTabItem(tab1, <ApartmentListPage nav={this.props.nav}/>)}
                    {this._renderTabItem(tab2, <ServiceListPage nav={this.props.nav}/>)}
                    {this._renderTabItem(tab3, <CustomerPage nav={this.props.nav}/>)}
                    {this._renderTabItem(tab4, <ProfilePage nav={this.props.nav}/>)}
                </TabNavigator>
            </View >
        );
    }
}


const styles = StyleSheet.create({
    tab: {
        height: 52,
        backgroundColor: '#F7F7FA',
        alignItems: 'center',
    },
    tabIcon: {
        width: 30,
        height: 30,
        resizeMode: 'stretch',
        marginTop: 12.5
    },
    tabTitleStyle: {
        color: '#e75404'
    },
});

• 使用到的图片资源

icon_tabbar_1_on.png

icon_tabbar_1.png

icon_tabbar_2_on.png

icon_tabbar_2.png

icon_tabbar_3_on.png

icon_tabbar_3.png

icon_tabbar_4_on.png

icon_tabbar_4.png

• 最终效果如下

QQ20161215-223510.gif

• react-native-tab-navigator组件提供了较多的style设置,我这个例子里面使用到了selectedTitleStyle这个属性，具体清单如下。

TabNavigator props

TabNavigator.Item props