RN实现TabNavigator自定义中间凸出Tab

RN实现TabNavigator自定义中间凸出Tab_第1张图片

其实这种效果很简单只要实现自定义tab然后将需要凸起的Tab单独拿出来设置成绝对布局就可以实现了。 
关键代码:

 render(){
        const {navigation,jumpToIndex} = this.props;
        const {routes,} = navigation.state;
        const focused = 1 === navigation.state.index;
        const color = focused ? this.props.activeTintColor : this.props.inactiveTintColor;
        let TabScene = {
            focused:focused,
            route:routes[1],
            tintColor:color
        };
        return (
        
            
                {routes && routes.map((route,index) => this.renderItem(route, index))}
            
          //需要凸起的tab 设置绝对布局
             jumpToIndex(1)}
        >
            
                {this.props.renderIcon(TabScene)}
                {this.props.getLabel(TabScene)}
            
        
        
        );
    }
完整代码: 
完整代码地址参考

你可能感兴趣的:(RN实现TabNavigator自定义中间凸出Tab)