记react native一个标签的实现

一点心≈

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

阅读量389

点赞数

分类专栏： React-Native JavaScript

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

版权

本文介绍了在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({
    si

最低0.47元/天解锁文章