我制作了原生Fab的Fab组件。我想展示可折叠按钮的徽章。我的解决方案在iOS上能正常工作,但在Android上无法正常使用,因为徽章不会溢出按钮,因此只能部分显示。
<Fab
active={isFabActive}
direction="up"
containerStyle={{}}
style={styles.fab}
position="bottomRight"
onPress={() => onPressFn || this.setState( { isFabActive: !isFabActive } )}>
<Icon type={iconFont} name={iconName}/>
{
!onPressFn && buttons && buttons.map( ( i, index ) => (
<Button iconCenter
style={{ backgroundColor: "#3B5998" }}
onPress={ i.onPressFn }
key={index}>
<Icon type={ i.iconFont || 'FontAwesome' } name={i.iconName}/>
{
i.badgeText !== undefined && <Badge style={styles.fabBadge}><Text>{i.badgeText}</Text></Badge>
}
</Button>
))
}
</Fab>
const styles = StyleSheet.create( {
fab: {
backgroundColor: COLOR_PRIMARY
},
fabBadge: {
position: 'absolute',
right: -10,
top: -10,
}
} )
答案 0 :(得分:1)
在Android overflow: visible
上尚不支持,如果要使其可见,请在父视图(<Fab />
)上添加填充以使其更大,以免徽章被剪掉。