Question

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

Answer 1

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

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

1 个答案: