React Native Tab Navigator:如何让图标溢出标签栏？

Question

我想让标志中心位于tarbar中,这就是顶部的溢出标签栏.怎么做 ？....... ........................................... .................................................. .................................................. ....

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;

像这样的当前

我想要这样..

Answer 1

使用自定义导航器来自定义选项卡视图可以达到目的，但需要付出更多的努力。这是文档https://reactnavigation.org/docs/navigators/custom

这是一个小例子https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/CustomTabs.js