react-native - 带有可折叠按钮徽章的 Fab 拨号按钮

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,
    }
} )

标签： react-nativenative-base

Answer 1

在 androidoverflow: visible上尚不支持，如果您想让它可见，请在父视图 ( <Fab />) 中添加填充以使其更大，这样徽章就不会被剪切。