ReactNative tababr的封装

先上图,一贯的作风

Paste_Image.png

Paste_Image.png

看到这个图片了吧

  iOS是没有问题的
  可惜,安卓就是不显示,很是恶心啊.安卓的坑真心的多.
  首先要导入
  import TabNavigator from 'react-native-tab-navigator'
  这个框架还是挺好用的.

下面给段iOS的代码吧,安卓的后续跟上.

    这都是封装好的,可以直接拿去使用

   return (
            <TabNavigator>
                {/*--主页--*/}
                {this.renderTabBarItem('主页', 'r_news_0', 'news','Dynamic', '主页', Home)}
                {/*--基酒--*/}
                {this.renderTabBarItem('基酒', 'gfound_icon', 'found_ion','Find', '基酒', Base)}
                {/*--发布--*/}
                {this.renderTabBarItem1('发布', 'gnews_icon', 'news_icon','Message', '发布', News)}
                {/*--金融--*/}
                {this.renderTabBarItem('金融', 'gwo_icon', 'r_geren-0','Mine', '金融', Finance)}
                {/*--我的--*/}
                {this.renderTabBarItem('我的', 'gwo_icon', 'r_geren-0','Mine', '我的', Mine)}
            </TabNavigator>
        );


 /**
     * 
     * 
     * @param {any} title 名字
     * @param {any} iconName 默认图标名称
     * @param {any} selectedIconName 选中图标名称
     * @param {any} selectedTab 选中的tab
     * @param {any} componentName 跳转的页面名字
     * @param {any} component 跳转的页面
     * @param {any} badgeText 角标
     * @returns
     */
    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>
        )
    },

好了神一样的代码,有使用的就拿去吧 防止有些人只知道动手,中间突出的部分代码就不贴出来了. 实现起来也很简单,有兴趣的自己研究.