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

prop	default	type	description
sceneStyle	inherited	object (style)	define for rendered scene
tabBarStyle	inherited	object (style)	define style for TabBar
tabBarShadowStyle	inherited	object (style)	define shadow style for tabBar
hidesTabTouch	false	boolean	disable onPress opacity for Tab

TabNavigator.Item props

prop	default	type	description
renderIcon	none	function	returns Item icon
renderSelectedIcon	none	function	returns selected Item icon
badgeText	none	string or number	text for Item badge
renderBadge	none	function	returns Item badge
title	none	string	Item title
titleStyle	inherited	style	styling for Item title
selectedTitleStyle	none	style	styling for selected Item title
tabStyle	inherited	style	styling for tab
selected	none	boolean	return whether the item is selected
onPress	none	function	onPress method for Item
allowFontScaling	false	boolean	allow font scaling for title