React Native 自定义动态标签

项目中我们经常会遇到标签的样式，那么我们如何自定义呢？

起初想直接使用Text设置间距不就可以了，

然而实测发现Text组件设置borderRadius、borderTopRightRadius等圆角是不会生效的，圆角需要设置在View上

所以我们的方案就是View包裹Text。用View设置圆角，用Text展示文本

对于右侧展示的我就是测一测标签提供了两个方案：

A:利用justifyContent:'flex-end'属性设置

B:利用flex：1的特性，设置左边View动态填充

 

如图效果：两个标签长度是可以动态变化的

A:利用justifyContent:'flex-end'属性设置(我就是测一测)

               <View style={style.item_blue_bg}>
                  <View style={style.item_blue}>
                    <Text style={style.item_blue_title}>我就是试一试</Text>
                  </View>
                </View>

  item_blue_bg: {
        flexDirection: 'row',
        height: 17,
        justifyContent:'flex-end'
    },

    item_blue: {
        backgroundColor: '#3480FF',
        borderTopRightRadius: 8,
        borderBottomLeftRadius: 8,
        paddingHorizontal: 5,
        justifyContent: 'center',
    },

    item_blue_title: {
        fontSize: DeviceHelp.fontSize(12),
        color: '#FFFFFF',
    },

 

 B:利用flex：1的特性，设置左边View动态填充(我就是测一测)

export default class ComponentItemView extends React.Component<IProps> {

    render() {
        return (
            <View style={style.item_bg}>
                // 不展示标签时依旧占有位置，通过设置height实现
                <View style={style.item_blue_bg}>
                    <View style={style.item_blue_left}></View>
                    <View style={style.item_blue}>
                        <Text style={style.item_blue_title}>我就是测一测</Text>
                    </View>

                </View>


                <View style={style.item_top_bg}>
                    {/* 标签 */}
                    <View style={style.item_year}>
                        <Text style={style.item_year_title}>测试</Text>
                    </View>

                    {/* 名称 */}
                    <Text style={style.item_title}>我就是测一测我就是测一测我就是测一测我就是测一测我就是测一测</Text>
                </View>

                <View style={style.item_bottom_bg}>
                    // 组件中心对齐
                    <Text style={style.item_left}>测试一下：<Text style={style.item_right}>93分</Text></Text>
                    <Text style={style.item_left}>测试一下：<Text style={style.item_right}>33</Text></Text>
                </View>

            </View>
        );
    }

}

const style = StyleSheet.create({

    item_bg: {
        borderRadius: 8,
        marginHorizontal: 10,
        marginBottom: 10,
        paddingLeft: 15,
        paddingBottom: 20,
        backgroundColor: '#FFFFFF',
    },

    item_blue_bg: {
        flexDirection: 'row',
        height: 17,
    },

    item_blue_left: {
        flex: 1,
    },

    item_blue: {
        backgroundColor: '#3480FF',
        borderTopRightRadius: 8,
        borderBottomLeftRadius: 8,
        paddingHorizontal: 5,
        justifyContent: 'center',
    },

    item_blue_title: {
        fontSize: DeviceHelp.fontSize(12),
        color: '#FFFFFF',
    },

    item_top_bg: {
        marginTop: 3,
        flexDirection: 'row',
        marginRight: 15,
    },

    item_year: {
        backgroundColor: '#FFFFFF',
        borderColor: '#FF4444',
        borderWidth: 1,
        borderRadius: 4,
        paddingHorizontal: 5,
        height: 17,
        justifyContent: 'center',
    },

    item_year_title: {
        fontSize: DeviceHelp.fontSize(12),
        color: '#FF4444',
    },

    item_title: {
        fontSize: DeviceHelp.fontSize(16),
        fontWeight: DeviceHelp.fontBold,
        color: '#222222',
        marginLeft: 8,
        lineHeight: 24,
        marginTop: -3,
        flex: 1,
    },

    item_center_bg: {
        marginTop: 13,
        flexDirection: 'row',
        alignItems: 'center',
    },

    item_img: {
        marginRight: 10,
    },

    item_left: {
        marginTop: 15,
        fontSize: DeviceHelp.fontSize(14),
        color: '#999999',
        flex: 1,
    },

    item_right: {
        fontSize: DeviceHelp.fontSize(14),
        color: '#666666',
    },

    item_bottom_bg: {
        flexDirection: 'row',
        alignItems: 'center',
    },

})