React-Native封装Tabbar 实现中间按钮溢出效果(Android/iOS)

以前写过一篇文章是基于react-native-tab-navigator 封装Tabbar，由于RN版本的不断更新，react-navigation，自17年1月开源以来就备受关注，Fb推荐使用库，并且在React Native0.44中已将Navigator删除。本文将以 react-navigation – 1.0.0-beta.27 / React-Native – 0.52.2 封装实现导航栏的溢出效果！

RN实现按钮凸出效果，在iOS移动端可以根据调整按钮上下的布局就能实现溢出效果的样式，Android端不支持溢出效果，所有要兼容Android端，则需要使用一个更高的容器试图支持一个大图标按钮(使用绝对布局实现该效果)!

NEXT：实现代码

/**
 * Created by zhangyanlf on 2018/2/2.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    Platform,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    NativeModules,
    ImageBackground,
    DeviceEventEmitter
} from 'react-native';

export default class Tab extends Component {
    renderItem = (route, index) => {
        const {
            navigation,
            jumpToIndex,
        } = this.props;

        const focused = index === navigation.state.index;
        const color = focused ? this.props.activeTintColor : this.props.inactiveTintColor;
        let TabScene = {
            focused:focused,
            route:route,
            tintColor:color
        };

        if(index === 2){
            return (backgroundColor:'transparent'}]}>
                
            );
        }

        return (
            () => jumpToIndex(index)}
            >
                
                    {this.props.renderIcon(TabScene)}
                    marginTop:SCALE(10),color }}>{this.props.getLabel(TabScene)}
                
            
        );
    };
    render(){
        const {navigation,jumpToIndex} = this.props;
        const {routes,} = navigation.state;
        const focused = 2 === navigation.state.index;
        const color = focused ? this.props.activeTintColor : this.props.inactiveTintColor;
        let TabScene = {
            focused:focused,
            route:routes[2],
            tintColor:color
        };
        return (width:WIDTH}}>
            
                {routes && routes.map((route,index) => this.renderItem(route, index))}
            View>
            {/*设置中间按钮凸出样式  使用绝对定位*/}
            <TouchableOpacity
                key={"centerView"}

                style={[styles.tabItem,{position:'absolute',bottom:0,left:(WIDTH-SCALE(100))/2,right:WIDTH-SCALE(100),height:SCALE(120)}]}
                onPress={() => jumpToIndex(2)}>
                
                    {this.props.renderIcon(TabScene)}
                    marginTop:SCALE(10),color }}>{this.props.getLabel(TabScene)}
                
            
        );
    }
}
const styles = {
    tab:{
        width:WIDTH,
        backgroundColor:'transparent',
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'flex-end'
    },
    tabItem:{
        height:SCALE(80),
        width:SCALE(100),
        alignItems:'center',
        justifyContent:'center'
    },
    tabText:{
        marginTop:SCALE(13),
        fontSize:FONT(10),
        color:'#7b7b7b'
    },
    tabTextChoose:{
        color:'#f3474b'
    },
    tabImage:{
        width:SCALE(42),
        height:SCALE(42),
    },
};

效果图展示：

想要了解 react-navigation 如何使用也可以查看我的上一篇文章react-navigation使用技巧,也可以查看react-navigation 中文翻译： https://www.reactnavigation.org.cn。

PS: 运用 react-navigation 是问题记录 （遇到的问题后续还会持续更新）

1.Android 导航栏文字居中效果

node_modules – react-navigation – src – views – Header – Header.js 修改368行 将 alignItems: Platform.OS === ‘ios’ ? ‘center’ : ‘flex-start’ 改为 ‘center’即可

title: {
        bottom: 0,
        left: TITLE_OFFSET,
        right: TITLE_OFFSET,
        top: 0,
        position: 'absolute',
        alignItems: 'center'//Platform.OS === 'ios' ? 'center' : 'flex-start',
  }

本文已同步至本人博客zhangyanlf.cn