weex-nuke/docs/text/demo/fixed.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Text Demo

* order: 0

包含字号，颜色，字重，固定单位等

---

```js
/** @jsx createElement */
import { Text, View, Page, Env } from 'weex-nuke';
import { createElement, Component, render } from 'rax';
const FontSizeArr = [
  { size: 12, lh: 20 },
  { size: 13, lh: 22 },
  { size: 14, lh: 23 },
  { size: 15, lh: 24 },
  { size: 16, lh: 26 },
  { size: 17, lh: 28 },
  { size: 18, lh: 29 },
  { size: 28, lh: 44 }
];
const { isWeb, isWeex } = Env;
const text =
  'กยังไม่มีรีวิวของสินค้าชนิดนี้ เขียนรีวิวแรก และบอกให้ลูกค้าท่านอื่นทราบว่าท่านคิดเห็นอย่างไร';
class TextDemo extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <Page title="Text">
        <Page.Intro main="fixedFont" />

        {FontSizeArr.map((item, index) => {
          return (
            <View style={styles.textLine}>
              <Text
                optimizeLineHeight
                fixedFont
                style={Object.assign({}, styles.resultText, {
                  fontSize: item.size * 2 + 'rem'
                  // lineHeight: item.lh + (isWeb ? 'px' : 'wx')
                })}
              >
                {item.size} {text}
              </Text>
            </View>
          );
        })}
        <Page.Intro main="normal" />

        {FontSizeArr.map((item, index) => {
          return (
            <View style={styles.textLine}>
              <Text
                optimizeLineHeight
                style={Object.assign({}, styles.resultText, {
                  fontSize: item.size * 2
                  // lineHeight: item.lh + (isWeb ? 'px' : 'wx')
                })}
              >
                {item.size} {text}
              </Text>
            </View>
          );
        })}
        <Text fixedFont style={[styles.text, { fontSize: 28 }]}>
          {text}
        </Text>
      </Page>
    );
  }
}
const styles = {
  resultText: {
    color: 'red',
    backgroundColor: '#eeeeee',
    marginBottom: 30,
    borderTopColor: 'blue',
    borderTopWidth: 1,
    borderTopStyle: 'solid'
  }
};
render(<TextDemo />);
```