實(shí)現(xiàn)如下效果

react-navigation凸起效果.png

其實(shí)這種效果很簡單只要實(shí)現(xiàn)自定義tab然后將需要凸起的Tab單獨(dú)拿出來設(shè)置成絕對(duì)布局就可以實(shí)現(xiàn)了。
關(guān)鍵代碼：

    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 (
        <View style={{width:WIDTH}}>
            <View style={styles.tab}>
                {routes && routes.map((route,index) => this.renderItem(route, index))}
            </View>
          //需要凸起的tab 設(shè)置絕對(duì)布局
            <TouchableOpacity
            key={"centerView"}
            style={[styles.tabItem,{position:'absolute',bottom:0,left:(WIDTH-SCALE(100))/2,right:WIDTH-SCALE(100),height:SCALE(120)}]}
            onPress={() => jumpToIndex(1)}
        >
            <View
                style={styles.tabItem}>
                {this.props.renderIcon(TabScene)}
                <Text style={{ ...styles.tabText,marginTop:SCALE(10),color }}>{this.props.getLabel(TabScene)}</Text>
            </View>
        </TouchableOpacity>
        </View>
        );
    }

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