React-navigation tabbar 中间的大图标答案

【问题标题】：React-navigation tabbar larger icon in the middleReact-navigation tabbar 中间的大图标
【发布时间】：2017-09-23 09:56:33
【问题描述】：

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

我目前正在使用 React-navigation（用于 react-native），我想知道是否可以让标签栏中心的一个图标比其他图标大，特别是当页面滚动时它背后的透明度.

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

如果这个库可以做到这一点，有人知道吗？如何实现？

我还想尝试一下 Wix 库 react-native-navigation 一旦他们实际发布了一个没有损坏的版本，错误的，实际上带有准确的文档，并且没有被当前版本的 react 损坏-本国的。（现在那里有点灾区，但它看起来非常好，所以我很想在它再次真正起作用时尝试一下），所以他们的图书馆是否有可能，我只需要等待尝试它出来了吗？

【问题讨论】：

我不得不做类似的事情，也找不到任何东西。我最终创建了自己的导航组件并进行了自定义实现之类的事情。看来我们只需要等待一个新的图书馆
您使用的是哪个图标库？它们中的大多数都具有属性，例如 size 以将其定义得更大。我个人将 react-native-vector-icons 与 React Navigation 一起使用。
@RyanTurnbull 哎呀，这听起来至少是我一个周末（或更多）的时间。哈哈。但谢谢你的提示。如果没有其他解决方案成为现实，我可能不得不考虑研究如何做到这一点。
@zvona 我对 react-native 还很陌生，还没有玩过很多库。现在我只是将图标图像直接输入到导航选项中。不确定 size 属性是否会这样做。有了我现在所拥有的，我只能通过从网站上下载一个更大的图标来使它们变大，然后通过一点样式它变得更大。但是标签栏只是扩展了。如果你强制标签栏高度，图标会溢出，但会向下溢出屏幕，而不是像我想要的那样向上溢出。

标签： react-native react-navigation react-native-navigation

【解决方案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
  }
});

Charities 选项卡延伸到选项卡栏之外，因为 tabBarIcon 被包裹在一个高度大于选项卡栏高度的 View 组件中。然后使用borderRadius:100 制作圆形。

可能有更好的方法来做到这一点，但这非常简单。

TabBar Image

【讨论】：

你是如何设法溢出组件的？我试过你的自定义组件，但它没有溢出
对此有什么解决方案吗？如何修复溢出？