react-native - react 导航选项卡栏中间的较大图标

Question

如果在其他地方已回答过此问题，请随时向我指出正确的方向，但是我无法通过此处或Google找到它。也许我只是不知道这个东西的正确名称？

我目前正在使用React导航(对于react-native)，我想知道是否可以使选项卡栏中央的一个图标大于其他图标，特别是在页面滚动时其背后具有透明性。

在这里模拟一个例子:
Larger icon in middle overlaying scrollable area of screen

有人可能在这个库中实现它吗？如何实现？

我还考虑过在Wix库实际发布了一个不会损坏，有故障的，实际上带有准确文档的版本，并且并未与最新版本的react-native捆绑在一起的情况下尝试使用Wix库进行react-native-navigation。 (现在那里有点灾区，但是看起来很不错，所以我很想一旦它可以再次工作就尝试一下)，那么他们的图书馆是否有可能，我只需要等待尝试一下即可出去？

Answer 1

我能够使用以下配置创建类似的样式:

export const Tabs = TabNavigator({
  Profile: {
    screen: ProfileStack,
    navigationOptions: {
      title: 'Profile',
      tabBarLabel: 'Profile',
      tabBarIcon: ({tintColor}) => <Icon name="ios-settings-outline" 
      type="ionicon" size={33} color={tintColor}/>
    }
  },
  Charities: {
    screen: Charities,
    navigationOptions: {
      title: 'Browse',
      tabBarLabel: 'Browse',
      tabBarIcon: ({tintColor}) => 
      <View style={{
          height: 80,
          width: 80,
          borderRadius: 100,
          backgroundColor: '#FE6D64',
          paddingTop: 15}}>
        <Icon name="ios-heart-outline" type="ionicon" size={45} 
         color{tintColor}/>
      </View>
    }
  },
  Account: {
    screen: AccountStack,
    navigationOptions: {
      title: 'Account',
      tabBarLabel: 'Account',
      tabBarIcon: ({tintColor}) => <Icon name="connectdevelop" type="font-
      awesome" size={25} color={tintColor}/>
    }
  }
}, {
  tabBarOptions: {
    activeTintColor: '#84E1BF',
    inactiveTintColor: 'white',
    labelStyle: {
      fontSize: 12
    },
    style: {
      backgroundColor: '#283940'
    },
    showLabel: false
  }
});

“慈善”选项卡延伸到选项卡栏的外部，因为tabBarIcon包裹在View组件中，高度大于选项卡栏的高度。然后使用borderRadius:100制作圆形。
可能有更好的方法来执行此操作，但这是相当简单的。
TabBar Image