react-native 项目实战 -- 新闻客户端（3） -- 包装导航控制器

1.修改后的 Main.js

/**
 * 主页面
 */
import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    Platform,  //判断当前运行的系统
} from 'react-native';

/*=============导入外部组件类==============*/
import TabNavigator from 'react-native-tab-navigator';
import CustomerComponents, { Navigator } from 'react-native-deprecated-custom-components';

// 引入外部的组件(此处注意是相当于了项目根目录)
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>
                {/*--首页--*/}
                {this.renderTabBarItem('首页','icon_tabbar_home','icon_tabbar_home_selected','home','首页',Home,1)}
                {/*--消息--*/}
                {this.renderTabBarItem('消息','icon_tabbar_message','icon_tabbar_message_selected','message','消息',Message,2)}
                {/*--发现--*/}
                {this.renderTabBarItem('发现','icon_tabbar_find','icon_tabbar_find_selected','find','发现',Find)}
                {/*--我的--*/}
                {this.renderTabBarItem('我的','icon_tabbar_mine','icon_tabbar_mine_selected','mine','我的',Mine)}
            </TabNavigator>
        );
    },

    // 封装tabBarItem
    renderTabBarItem(title,iconName,selectedIconName,selectedTab,componentName,component,badgeText){
        return(
            <TabNavigator.Item
                title={title}
                renderIcon={() => <Image source={{uri:iconName}} style={styles.iconStyle} />}
                renderSelectedIcon={() => <Image source={{uri:selectedIconName}} style={styles.iconStyle} />}
                selected={this.state.selectedTab === selectedTab}
                onPress={() => this.setState({ selectedTab: selectedTab })}
                selectedTitleStyle={styles.selectedTitleStyle} //tabBarItem选中的文字样式
                badgeText={badgeText}
            >
                <Navigator
                    initialRoute={{name: componentName, component:component}}
                    configureScene={()=>{
                        return Navigator.SceneConfigs.PushFromRight;
                    }}
                    renderScene={(route, navigator) =>{
                        let Component = route.component;
                        return <Component {...route.passProps} navigator={navigator} />
                    }}
                />
            </TabNavigator.Item>
        )
    }
});

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;

 

2.效果图

.