记react native一个标签的实现

一点心≈

于 2021-02-07 11:42:05 发布

阅读量394

点赞数

CC 4.0 BY-SA版权

分类专栏： React-Native JavaScript

本文链接：https://blog.youkuaiyun.com/baihailing/article/details/113738051

React-Native 同时被 2 个专栏收录

22 篇文章

订阅专栏

JavaScript

8 篇文章

订阅专栏

本文介绍了在React Native项目中如何实现一个具有特定背景透明度和圆角的标签。对于带有透明背景和圆角的标签，单纯使用Text组件无法满足需求，需要使用View组件进行包裹。同时，文章提到了背景颜色透明度的两种表示方法：RGBA和16进制的八位表示法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中需要实现一个标签：

后两个蓝色标签用一个text，加圆角，border就可以实现。但是第一个标签，涉及背景颜色的透明度、圆角，且没有border，用一个text实现不了,只能用一个view去包裹一下。

let labelViewStyle = { backgroundColor: "rgba(255,128,115,0.1)", borderRadius: 6}
let labelTextStyle = { color: '#FF8073' }

this._renderLabel('星巴克可用', labelViewStyle, labelTextStyle, 0)

 _renderLabel = (labelText, labelViewStyle, labelTextStyle, index) => {
        return (
            labelText ? <View style={[styles.singleLabelView, labelViewStyle]} key={index}>
                <Text style={[styles.label, labelTextStyle]} allowFontScaling={false} numberOfLines={1}>{labelText}</Text>
            </View> : null
        );
    }


const styles = StyleSheet.create({
    singleLabelView: {
        maxWidth: (width - 72 - 42 - 24 - 12 - 3 * 6) / 3,
        height: 16,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 9,
    },
    label: {
        fontSize: 9,
        textAlign: 'center',
        textAlignVertical: 'center',
        letterSpacing: 0.45,
        fontWeight: 'bold',
    },
});

在涉及背景颜色透明度除了"rgba(255,128,115,0.1)" 这样的写法，还可以用八位的16进制写法。https://www.cnblogs.com/oltra/p/5841969.html