RN封装Tabbar

做个封装的Tabbar为了以后方便运用，同时也希望给初学者提供一点小小的帮助，闲话不多说了，开始封装Tabbar（兼容iOS及Android）。

1.初始化项目导入图片资源，iOS直接导入Images.xcassets即可，Android导入src/mian/res下面，与Android导入资源方法一致。

2.整合项目，创建Class文件夹，将所要编写的js文件全部放在里面方便管理及后期项目维护。

整合后index.ios.js及index.android.js作为程序的入口，Class中创建packageTabbar.js文件， 如下图：

注意：导入外部组件时首字母必须大写不然会报错。

ok！！下面就开始一步一步的封装Tabbar：
第一步：进入RN项目目录执行npm install react-native-tab-navigator –save导入库 传送门 学习react-native-tab-navigator具体使用；

第二步：进入packagetabbar.js导入外部组件

/**-导入外部组件-**/
import TabNavigator from 'react-native-tab-navigator';

第三部：编写Tabbar代码

/**----导入外部组件-----**/
import TabNavigator from 'react-native-tab-navigator';

var Home = require('../Home/ZylHome');
var Mine = require('../Mine/ZylMine');
var Shop = require('../Shop/ZylShop');
var More = require('../More/ZylMore');

var Main = React.createClass({

    //初始化函数（变量是可以改变，从当状态机的角色）
    getInitialState(){
      return{
          selectedTab:'home' //默认是第一个
      }
    },

    render() {
        return (
            <TabNavigator>
                {/*--首页--*/}
                {this.renderTabBarItem('首页', 'icon_tabbar_homepage', 'icon_tabbar_homepage_selected', 'home', '首页', Home)}
                {/*--商家--*/}
                {this.renderTabBarItem('商家', 'icon_tabbar_merchant_normal', 'icon_tabbar_merchant_selected', 'shop', '商家', Shop)}
                {/*--我的--*/}
                {this.renderTabBarItem('我的', 'icon_tabbar_mine', 'icon_tabbar_mine_selected', 'mine', '我的', Mine)}
                {/*--更多--*/}
                {this.renderTabBarItem('更多', 'icon_tabbar_misc', 'icon_tabbar_misc_selected', 'more', '更多', More)}

            </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}/>} //选中图标
                onPress={() =>{this.setState({selectedTab:selectedTab})}}
                selected={this.state.selectedTab === selectedTab}
                selectedTitleStyle={styles.selectedTitleStyle}
                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({

    iconStyle: {
        width: Platform.OS === 'ios' ? 30 :25,
        height: Platform.OS === 'ios' ? 30 :25
    },
    selectedTitleStyle: {
        color: 'orange'
    }
});

第四部：运行工程，查看结果，针对iOS及Android页面细节做出调整（查看上面代码Platform–判断系统）

效果图如下：

GitHub地址