官方手册

• <text> 是 Weex 内置的组件，用来将文本按照指定的样式渲染出来。<text> 只能包含文本值，你可以使用 {{}} 标记插入变量值作为文本内容。

特性

• value {string}: 组件的值，与<text> 标签中的文本内容相同。

样式

• lines {number}: 指定文本行数。默认值是 0 代表不限制行数。
• 支持 color 样式.
• 支持 font-size 样式. iOS默认值：32(16点，这里是px)，Android：不同设备不同，H5 默认值：32.
• 支持 font-style 样式.
• 支持 font-weight 样式.
• 支持 text-align 样式.
• 支持 text-decoration 样式.
• 支持 text-overflow 样式.
• 支持 line-height样式 。line-height 在 iOS 中与 H5 和 Android 中不同， 文本值将放置在框的底部。

约束

• <text> 里直接写文本头尾空白会被过滤，如果需要保留头尾空白，暂时只能通过数据绑定写头尾空格。

• 不支持 flex-direction, justify-content, align-items 这些为子节点设置的属性，并且<text>没有子节点。

示例

<template>
  <div class="wrapper">
    <div class="panel">
      <text class="text" lines="3">Weex 是一套简单易用的跨平台开发方案，能以 Web 的开发体验构建高性能、可扩展的原生应用。Vue 是一个轻量并且功能强大的渐进式前端框架。</text>
    </div>
    <div class="panel">
      <text class="text" lines="3">Weex is an cross-platform development solution that builds high-performance, scalable native applications with a Web development experience. Vue is a lightweight and powerful progressive front-end framework. </text>
    </div>
  </div>
</template>
<style scoped>
  .wrapper {
    flex-direction: column;
    justify-content: center;
  }
  .panel {
    width: 600px;
    margin-left: 75px;
    border-width: 2px;
    border-style: solid;
    border-color: #BBB;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
  }
  .text {
    lines: 3;
    color: #666666;
    font-size: 32px;
  }
</style>

SDK 源码

• 组件类：WXTextComponent

[self registerComponent:@"text" withClass:NSClassFromString(@"WXTextComponent") withProperties:nil];

• 实现方式是NSTextStorage

- (void)viewDidLoad
{
    ((WXText *)self.view).textStorage = _textStorage;
    [self setNeedsDisplay];
}

- (UIView *)loadView
{
    return [[WXText alloc] init];
}

@interface WXText : UIView

@property (nonatomic, strong) NSTextStorage *textStorage;

@end

@interface NSTextStorage : NSMutableAttributedString

在UIKit中。

• 字符内容是放在一个NSString中，但却是画出来的，想法有点奇特

- (UIImage *)drawTextWithBounds:(CGRect)bounds padding:(UIEdgeInsets)padding
{
    if (bounds.size.width <=0 || bounds.size.height <= 0) {
        return nil;
    }
    UIGraphicsBeginImageContextWithOptions(bounds.size, self.layer.opaque, WXScreenScale());
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    if ([self.wx_component _needsDrawBorder]) {
        [self.wx_component _drawBorderWithContext:context size:bounds.size];
    }
    
    NSLayoutManager *layoutManager = _textStorage.layoutManagers.firstObject;
    NSTextContainer *textContainer = layoutManager.textContainers.firstObject;
    
    CGRect textFrame = UIEdgeInsetsInsetRect(bounds, padding);
    NSRange glyphRange = [layoutManager glyphRangeForTextContainer:textContainer];
    
    [layoutManager drawBackgroundForGlyphRange:glyphRange atPoint:textFrame.origin];
    [layoutManager drawGlyphsForGlyphRange:glyphRange atPoint:textFrame.origin];
    
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
    UIGraphicsEndImageContext();
    
    return image;
}