react-native 项目实战 -- 新闻客户端（2） -- 完善TabBar

1.创建 drawable-xxhdpi 文件夹，保存 TabBar 的 icon图标

android  --  app  --  src  --  main  --  res  --  drawable-xxhdpi

2.修改后的 Main.js

/**

 * 主页面

 */

import React, { Component } from 'react';

import {

    StyleSheet,

    Text,

    View,

    Image,

    Platform,  //判断当前运行的系统

} from 'react-native';

/*=============导入外部组件类==============*/

import TabNavigator from 'react-native-tab-navigator';

// 引入外部的组件(此处注意是相当于了项目根目录)

var Home = require('../Component/Home');

var Message = require('../Component/Message');

var Find = require('../Component/Find');

var Mine = require('../Component/Mine');

// ES5

var Main = React.createClass({

    // 初始化函数(变量是可以改变的,充当状态机的角色)

    getInitialState(){

        return{

            selectedTab:'home' // 默认选中的tabBar

        }

    },

    render() {

        return (

            <TabNavigator>

                {/*--首页--*/}

                <TabNavigator.Item

                    title="首页"

                    renderIcon={() => <Image source={{uri:"icon_tabbar_home"}} style={styles.iconStyle} />}

                    renderSelectedIcon={() => <Image source={{uri:"icon_tabbar_home_selected"}} style={styles.iconStyle} />}

                    selected={this.state.selectedTab === "home"}

                    onPress={() => this.setState({ selectedTab: "home" })}

                    selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式

                    badgeText="1"

                >

                    <Home />

                </TabNavigator.Item>

                {/*--消息--*/}

                <TabNavigator.Item

                    title="消息"

                    renderIcon={() => <Image source={{uri:"icon_tabbar_message"}} style={styles.iconStyle} />}

                    renderSelectedIcon={() => <Image source={{uri:"icon_tabbar_message_selected"}} style={styles.iconStyle} />}

                    selected={this.state.selectedTab === "message"}

                    onPress={() => this.setState({ selectedTab: "message" })}

                    selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式

                    badgeText="2"

                >

                    <Message />

                </TabNavigator.Item>

                {/*--发现--*/}

                <TabNavigator.Item

                    title="发现"

                    renderIcon={() => <Image source={{uri:"icon_tabbar_find"}} style={styles.iconStyle} />}

                    renderSelectedIcon={() => <Image source={{uri:"icon_tabbar_find_selected"}} style={styles.iconStyle} />}

                    selected={this.state.selectedTab === "find"}

                    onPress={() => this.setState({ selectedTab: "find" })}

                    selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式

                >

                    <Find />

                </TabNavigator.Item>

                {/*--我的--*/}

                <TabNavigator.Item

                    title="我的"

                    renderIcon={() => <Image source={{uri:"icon_tabbar_mine"}} style={styles.iconStyle} />}

                    renderSelectedIcon={() => <Image source={{uri:"icon_tabbar_mine_selected"}} style={styles.iconStyle} />}

                    selected={this.state.selectedTab === "mine"}

                    onPress={() => this.setState({ selectedTab: "mine" })}

                    selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式

                >

                    <Mine />

                </TabNavigator.Item>

            </TabNavigator>

        );

    },

});

const styles = StyleSheet.create({

    // icon默认样式

    iconStyle:{

        width: Platform.OS === 'ios' ? 30 : 25,

        height:Platform.OS === 'ios' ? 30 : 25,

    },

    // tabBarItem选中的文字样式

    selectedTitleStyle:{

        color: 'rgba(212,97,0,1)',

    }

});

// 输出

module.exports = Main;

3.效果图

.