更新:如果想实现,简单的行间距的,可利用
style="line-height:30px"
利用这个行高属性,可以模拟出行间距的效果,不过得根据字号大小来调整这个值。
更新:自定义太麻烦了,直接用weex-ui里的组件吧。
需求
带行间距、电话下划线,电话可拨打,电话不颜色
官方资料
http://weex-project.io/cn/references/advanced/extend-to-ios.html
操作流程
#import <WeexSDK/WeexSDK.h>
@interface WXRichText : WXComponent
@end
#import "WXRichText.h"
#import "TTTAttributedLabel+TipsLabel.h"
@interface WXRichText()<TTTAttributedLabelDelegate>
/// 这个组件我们需要用到TTTAttributedLabel来实现
@property (weak, nonatomic) TTTAttributedLabel *label3;
// 以下的属性用于记录从weex传过来的属性
@property(nonatomic, strong) UIColor *normalColor;
@property(nonatomic, strong) UIColor *specialColor;
@property(nonatomic, strong) UIFont *font;
@property(nonatomic, copy) NSString *text;
@property(nonatomic, copy) NSString *specialText;
@property(nonatomic, assign) CGFloat maxWidth;
@property(nonatomic, assign) CGFloat lineSpacing;
@end
@implementation WXRichText
-(instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{
if(self= [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]){
_normalColor = [UIColor colorWithHexString:styles[@"normalColor"]];
_specialColor = [UIColor colorWithHexString:styles[@"specialColor"]];
_font = [UIFont systemFontOfSize:[styles[@"fontSize"] floatValue]];
// 从weex传字符串过来会带有 ' ',得手动去除,请大神给个优化
NSMutableString *muText = [NSString stringWithFormat:@"%@" ,styles[@"text"]].mutableCopy;
if ([muText hasPrefix:@"'"]) {
_text = [muText stringByReplacingOccurrencesOfString:@"'" withString:@""];
}
if ([muText hasPrefix:@"'"]) {
_text = [muText stringByReplacingOccurrencesOfString:@"'" withString:@""];
}
_specialText = [styles[@"specialText"] stringByReplacingOccurrencesOfString:@"'" withString:@""];
_maxWidth = [styles[@"width"] floatValue];
_lineSpacing = [styles[@"lineSpacing"] floatValue];
}
return self;
}
- (UIView *)loadView {
// 这里我们给控件一些初始化默认的数据
TTTAttributedLabel *label = [[TTTAttributedLabel alloc] initWithFrame:CGRectZero];
label.textColor = [UIColor colorWithHexString:@"0x888888"];
label.numberOfLines = 0;
label.font = [UIFont systemFontOfSize:14];
label.lineSpacing = 8;
label.lineBreakMode = NSLineBreakByWordWrapping;
NSString *text = @"3、如有疑问,请拨打客服电话400-100-8899,我们将竭诚为您服务。";
label.text = text;
self.label3 = label;
[label sizeToFit];
return label;
}
-(void)viewDidLoad {
self.label3.delegate = self;
NSDictionary *dict = @{(__bridge NSString *)kCTUnderlineStyleAttributeName : [NSNumber numberWithInteger:NSUnderlineStyleSingle],(NSString *)kCTForegroundColorAttributeName : (__bridge id)[_specialColor CGColor]};
self.label3.linkAttributes = dict;
self.label3.activeLinkAttributes = dict;
TTTAttributedLabel *label = self.label3;
label.textColor = _normalColor;
label.numberOfLines = 0;
label.font = _font;
label.lineSpacing = _lineSpacing;
label.lineBreakMode = NSLineBreakByWordWrapping;
NSString *text = _text;
label.text = text;
[self.label3 addLinkToTransitInformation:@{@"actionStr" : @"callServePhone"} withRange:[text rangeOfString:_specialText]];
/// 这里这个可做到让label自适应,不管weex对此label设置了高度没
[self.label3 sizeToFit];
}
#pragma mark - TTTAttributedLabelDelegate
- (void)attributedLabel:(TTTAttributedLabel *)label didSelectLinkWithTransitInformation:(NSDictionary *)components{
[self callConsumerHotline];
}
@end
weex布局处理
template
里加入组件
<richText class = "richText" ></richText>
style
里配置参数
.richText {
font-size: 18;
normalColor: #888888;
text:'2. 如有疑问,请拨打客服电话400-100-8899,我们将竭诚为您服务。';
specialColor: #F45861;
specialText:'400-100';
lineSpacing: 8;
width: 750;
/// 高度不用限定,ios 使用sizeToFit可自适应,安卓未知。
/*height: 900;*/
}
代码写得太匆忙,有时间优化。