React Native Tab Navigator：如何讓圖標溢出tabbar？

我想讓標識中心位於標題欄中，而頂部是溢出標籤欄。怎麼做？ ....... .......................................... .................................................. .................................................. .....React Native Tab Navigator：如何讓圖標溢出tabbar？

import React from 'react'; 
import TabNavigator from 'react-native-tab-navigator'; 
import { 
    View, 
    Text, 
    StyleSheet, 
    Image 
} from 'react-native'; 

class App extends React.Component { 
    constructor(props){ 
    super(props) 
    this.state={ 
     selectedTab:'首頁', 
    } 
    } 
    render() { 
    return (
     <View style={styles.container}> 
     <TabNavigator tabBarStyle={styles.tabBarStyle} tabBarShadowStyle={styles.tabBarShadowStyle}> 
      <TabNavigator.Item 
      selected={this.state.selectedTab === '首頁'} 
      title="首頁" 
      selectedTitleStyle={styles.selectedTitleStyle} 
      renderIcon={() => <Image style={styles.tabBarIcon} source={require('../../res/images/icons/home.png')}/>} 
      renderSelectedIcon={() => <Image style={[styles.tabBarSelectedIcon ]} source={require('../../res/images/icons/home.png')}/>} 
      onPress={() => this.setState({ selectedTab: '首頁' })} > 
      <Text>首頁</Text> 
      </TabNavigator.Item> 
      <TabNavigator.Item 
      selected={this.state.selectedTab === '產品'} 
      title="產品" 
      selectedTitleStyle={styles.selectedTitleStyle} 
      renderIcon={() => <Image style={styles.tabBarIcon} source={require('../../res/images/icons/product.png')}/>} 
      renderSelectedIcon={() => <Image style={[styles.tabBarSelectedIcon ]} source={require('../../res/images/icons/product.png')}/>} 
      onPress={() => this.setState({ selectedTab: '產品' })} > 
      <Text>產品</Text> 
      </TabNavigator.Item> 
      <TabNavigator.Item 
      renderIcon={() => <Image style={styles.logoIcon} source={require('../../res/images/icons/logo_tab.png')}/>} > 
      </TabNavigator.Item> 
      <TabNavigator.Item 
      selected={this.state.selectedTab === '活動'} 
      title="活動" 
      selectedTitleStyle={styles.selectedTitleStyle} 
      renderIcon={() => <Image style={styles.tabBarIcon} source={require('../../res/images/icons/activity.png')}/>} 
      renderSelectedIcon={() => <Image style={[styles.tabBarSelectedIcon ]} source={require('../../res/images/icons/activity.png')}/>} 
      onPress={() => this.setState({ selectedTab: '活動' })} > 
      <Text>活動</Text> 
      </TabNavigator.Item> 
      <TabNavigator.Item 
      selected={this.state.selectedTab === '我的'} 
      title="我的" 
      selectedTitleStyle={styles.selectedTitleStyle} 
      renderIcon={() => <Image style={styles.tabBarIcon} source={require('../../res/images/icons/profile.png')}/>} 
      renderSelectedIcon={() => <Image style={[styles.tabBarSelectedIcon ]} source={require('../../res/images/icons/profile.png')}/>} 
      onPress={() => this.setState({ selectedTab: '我的' })} > 
      <Text>我的</Text> 
      </TabNavigator.Item> 
     </TabNavigator> 
     </View> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 
    tabBarStyle: { 
    backgroundColor: '#fff', 
    overflow: 'visible', 
    }, 
    tabBarShadowStyle: { 
    height: 0, 
    }, 
    selectedTitleStyle: { 
    color: '#b42325', 
    }, 
    logoIcon: { 
    zIndex: 9999, 
    position: 'absolute', 
    top: -50, 
    left: -25, 
    width: 60, height: 60, 
    }, 
    tabBarIcon: { 
    width: 26, height: 26, 
    resizeMode: 'contain', 
    tintColor: '#5f5f5f', 
    }, 
    tabBarSelectedIcon: { 
    width: 26, height: 26, 
    resizeMode: 'contain', 
    tintColor: '#b42325', 
    } 
}); 

export default App;

當前這樣