navbar組件在客戶端開發(fā)中是必備技能，使用react-native開發(fā)adr/ios通用的navbar十分簡(jiǎn)單，下面我通過使用開源組件快速的實(shí)現(xiàn)。

• 項(xiàng)目開源地址
  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: '老人服務(wù)',
    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設(shè)置,我這個(gè)例子里面使用到了selectedTitleStyle這個(gè)屬性，具體清單如下。

TabNavigator props

TabNavigator.Item props