WEEX - компонент RichText на iOS - PullRequest
Новая
       16

WEEX - компонент RichText на iOS

0 голосов
/ 01 июня 2018

Я создаю компонент представления Richtext (WXTextView.swift) в Weex, расширяя WXComponent.В настоящее время компонент Richtext недоступен в weex iOS SDK.

Вот мой пример кода WXRichText.swift 

    import Foundation
    import WeexSDK
    import UIKit

    class TextComponet: WXComponent {

    var attributedText: NSAttributedString?

    override func loadView() -> UIView {
        let label = UILabel()
        label.numberOfLines = 0
        label.attributedText = attributedText
        label.sizeToFit()
        label.adjustsFontSizeToFitWidth = true
        return label
    }

    override init(ref: String, type: String, styles: [AnyHashable : Any]?, attributes: [AnyHashable : Any]? = nil, events: [Any]?, weexInstance: WXSDKInstance) {
        super.init(ref: ref, type: type, styles: styles, attributes: attributes, events: events, weexInstance: weexInstance)
        if let data = attributes?["data"] as? String {
            let htmlString = "<html><body>\(data)<body></html>"
            attributedText = htmlString.htmlToAttributedString
        }
    }

    func data(_ text: String) {

    }
}

extension String {
    var htmlToAttributedString: NSAttributedString? {
        guard let data = data(using: .utf8) else { return NSAttributedString() }
        do {
            return try NSAttributedString(data: data, options: [NSAttributedString.DocumentReadingOptionKey.documentType:  NSAttributedString.DocumentType.html], documentAttributes: nil)
        } catch {
            return NSAttributedString()
        }
    }

    var htmlToString: String {
        return htmlToAttributedString?.string ?? ""
    }
}

и кода JS 

<template>
  <div>
    <text class="message">Hi Bramma</text>
    <richText
      :data="data"
    >
    </richText>
  </div>
</template>

<script>
export default {
  data () {
    return {
      data: '<p style="color:red">This text is normal.</p><p><b>This text is bold.</b></p>'
    }
  }
}
</script>

Как и ожидалось, этоне отображать текст на нативной стороне через Weex.

1 Ответ

0 голосов
/ 04 июня 2018

Вы должны вернуть вид без определенной рамки и добавить стиль ширины и высоты в JS.

...