Fab拨号按钮,带有可折叠按钮的徽章

时间:2018-07-10 14:30:12

标签: react-native native-base

我制作了原生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,
    }
} )

comment

1 个答案:

答案 0 :(得分:1)

在Android overflow: visible上尚不支持,如果要使其可见,请在父视图(<Fab />)上添加填充以使其更大,以免徽章被剪掉。