五、ReactNative Text组件borderRadius

在最近的开发中遇到了一个看似简单的需求，要实现如下图的效果

image.png

重点是需要在标题的左边添加一个分类的标识，而这个标识不能直接使用Text嵌套Text实现。因为这个标识区域是有圆角的，Text标签设置borderRadius属性无效，我的RN版本是0.50.4。

为了实现上述需求，思路如下

• 1.对标题进行首行缩进，空出相应的空间进行标识的绘制。
• 2.Text标签内嵌套Image标签，不过ReactNative中文文档里有关于Text的一段描述嵌套视图（仅限 iOS)，我在项目中不管是Android还是iOS测试都可以实现Image的嵌套

方法2相对比较简单，下面主要说一下方法1

• 空格占位符
  空格占位符相对于Text组件内的字符串来说可以根据情况设置不同的缩进宽度。比如常见的首行缩进2字符，就可以使用  来进行设置。以下是不同宽度的空格占位符的清单：

  == 普通的英文半角空格
  ==   ==   == no-break space （普通的英文半角空格但不换行）
　 == 中文全角空格 （一个中文宽度）
  ==   == en空格 （半个中文宽度）
  ==   == em空格 （一个中文宽度）
  == 四分之一em空格 （四分之一中文宽度）

说明：

• 占位符不能在Text组件的“{}”中使用。
• 占位符之后一定要添加“；”。

实现

<View style={{flexDirection:'row',alignItems:'center'}}>
    <Text style={styles.titleStyle} numberOfLines={2}>&emsp;&emsp;&ensp;{`测试标题，这个标题可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长`}</Text>
    <View style={styles.classNameBox}>
        <Text style={{fontSize:Size(12),color:'#4595FF'}} numberOfLines={1}>
            {`${classname&&classname.slice(0,2)}`}
        </Text>
    </View>
</View>

titleStyle:{
    flex: 1,
    color:"#28314E",
    fontSize:Size(18),
    lineHeight:22,
    marginVertical:Size(15),
    fontWeight:"bold"
},

classNameBox: {
    position: 'absolute',
    width: Size(36),
    height: Size(20),
    marginTop: 15,
    alignSelf: 'baseline',
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#4595FF',
    justifyContent: 'center',
    alignItems: 'center',
},

注意⚠️

• 因为分类标签的文本长度不同，所以实现的时候，要根据具体长度，留出占位符

末尾彩蛋