-
<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;
}
