React Native Sek Navigator: Simgenin taşması nasıl yapılır?

Question

Logo merkezinin tarpanda olmasına izin vermek istiyorum, bu da üstteki taşma sekmesidir. Nasıl yapılır ? ....... .......................................... .................................................. .................................................. .....

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; 

bu

gibi Akım Ve bu sevmesini istiyorum ..

Answer 1

Kullanım özel gezgini sekme görünümü özelleştirmek için hile içindi, ama o daha fazla çaba içerecektir. TabBar görünür: İşte belgeler burada https://reactnavigation.org/docs/navigators/custom

Ve küçük bir örnek https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/CustomTabs.js