如果已在其他地方得到解答,请随时指出我正确的方向,但我无法通过此处或谷歌找到它。也许我只是不知道这件事的正确名称?
我目前正在使用React-navigation(反应原生),我想知道是否可以在标签栏的中心制作一个比其他图标更大的图标,特别是当页面滚动时背后的透明度。
在这里嘲笑一个例子: Larger icon in middle overlaying scrollable area of screen
有没有人可以使用这个库,以及如何实现它?
我还想在Wix库实际发布一个没有破坏的版本,错误,实际上带有准确的文档,并且没有被打破当前版本的react-native。 (它现在是一个灾区,但它看起来非常好,所以我很想在它再次实际工作后尝试它),所以它可以用它们的库和我来做只需等待尝试一下?
答案 0 :(得分: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制作圆形。
可能有更好的方法可以做到这一点,但这非常简单。