React-navigation tabbar中间的大图标

问题描述：

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

我目前正在使用React-navigation（用于react-native），我想知道是否有可能在标签栏的中间使一个图标大于其他图标，特别是在页面后面有透明背景时滚动。

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

有谁这是否可能与此库，以及它如何实现？

我也在考虑试用Wix库react-native-navigation，一旦它们实际发布了一个没有损坏的版本，其中包含了错误的版本，实际上还带有准确的文档，并且没有被当前版本的反应母语。（现在这里有点灾难，但看起来非常好，所以一旦它真的重新开始工作，我就热衷于尝试它），所以它可能与他们的图书馆，我只需要等待尝试它出来吗？

我不得不做类似的事情，也找不到任何东西。我最终创建了自己的导航组件并执行一些自定义的实现。我们只需要等待一个新的库似乎 –

你正在使用哪个图标库？他们中的大多数都有属性，比如_size_来定义它更大。我个人使用react-native-vector-icons和React Navigation。 – zvona

@RyanTurnbull哎哟，这听起来至少是我一个周末（或更多）的时间。哈哈。但谢谢你的提示。如果没有其他解决方案具体化，我可能不得不考虑研究如何做到这一点。 –

答

我能够创建一个类似的风格，配置如下：

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 
    } 
});

慈善组织选项卡中的TabBar的外部延伸，因为tabBarIcon被包裹在一个高度比的TabBar的更大的View组件。然后用borderRadius：100制作圆形。

可能有更好的方法来做到这一点，但这很直接。

TabBar Image

你是如何设法溢出组件的？我试过你的自定义组件，但它不溢出 – Damathryx

它似乎只在iOS上工作，而不是在Android上？ @@ – nguyencse

React-navigation tabbar中间的大图标

相关推荐