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地址