TabNavigator自定义Tab(2)

实现如下效果

react-navigation凸起效果.png

其实这种效果很简单只要实现自定义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)}
            
        
        
        );
    }

完整代码：
https://github.com/wuyunqiang/RNApp