技術標籤：React-NativeJavaScript

專案中需要實現一個標籤：

後兩個藍色標籤用一個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