React-navigation tabbar 中间的大图标
Posted
技术标签:
【中文标题】React-navigation tabbar 中间的大图标【英文标题】:React-navigation tabbar larger icon in the middle 【发布时间】: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 属性是否会这样做。有了我现在所拥有的,我只能通过从网站上下载一个更大的图标来使它们变大,然后通过一点样式它变得更大。但是标签栏只是扩展了。如果你强制标签栏高度,图标会溢出,但会向下溢出屏幕,而不是像我想要的那样向上溢出。 【参考方案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
colortintColor/>
</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
【讨论】:
你是如何设法溢出组件的?我试过你的自定义组件,但它没有溢出 对此有什么解决方案吗?如何修复溢出?以上是关于React-navigation tabbar 中间的大图标的主要内容,如果未能解决你的问题,请参考以下文章
从嵌套的 StackNavigator 中隐藏 TabBar 的反应导航屏幕
如何在打字稿中使用 react-navigation 的 withNavigation?