React Native 自定义动态标签-白红宇的个人博客

React Native 自定义动态标签

发布日期：2022-04-05 00:52:17 浏览次数：3 分类：博客文章

本文共 3443 字，大约阅读时间需要 11 分钟。

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

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

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

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

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

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

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

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

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


                      
                         
      
       我就是试一试
                        
                     
      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
    
      {    render() {        return (            
     
                       // 不展示标签时依旧占有位置，通过设置height实现                
                          
                           
                               
        
         我就是测一测
                            
                       
                      
      
                           {/* 标签 */}                    
                               
        
         测试
                            
                           {/* 名称 */}                    
       
        我就是测一测我就是测一测我就是测一测我就是测一测我就是测一测
                       
                      
      
                            // 组件中心对齐                    
       
        测试一下：
        
         93分
        
                           
       
        测试一下：
        
         33
        
                       
                  
             );    }}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',    },})

转载地址：https://www.cnblogs.com/lijianyi/p/14885515.html 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：React Native TypeError：undefined is not an object

下一篇：React Native 自定义单选功能

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章