RichText

• category: Components
• chinese: 富文本
• type: 基本

设计思路

由于 <richtext> 标签在 rax dsl 上使用存在诸多不便和限制，因此将其独立封装成一个组件，抹平了样式方面的差异问题。另外还解决了支持简单的一层嵌套的问题。

这个组件并不是对底层 weex richtext 的增强，因此无法解决其缺失的能力、以及与 web 不对等的问题。

注意：由于 weex 限制，该组件 shouldComponentUpdate 直接 return false;

API

• RichText 的子节点目前支持以下几种类型：

  • <Text>
  • <span>
  • <strong>
  • <b>
  • <Image>
  • <img>

• 普通用法：平铺所有行内元素

  <RichText>
    <Text style={{ color: '#424242', fontSize: 40 }}>
      Want a faster and easy
    </Text>
    <Text style={{ color: 'red', fontSize: 30 }}>I am good</Text>
  </RichText>

• 特性：支持一层嵌套，且嵌套的子节点样式可继承父节点的样式

  <RichText>
    <Text style={{ color: '#424242', fontSize: 40 }}>
      Want a faster and easy
      <strong style={{ color: 'red' }}>[email protected]</strong>
      below to register.
    </Text>
    <Text style={{ color: 'red', fontSize: 30 }}>I am good</Text>
  </RichText>