nuke-text/theme/index.jsx

文本

/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Text from 'nuke-text';
import View from 'nuke-view';
import Page from 'nuke-page';

const FontSizeArr = [
  { name: 'FootNote', size: 10 },
  { name: 'Caption', size: 12 },
  { name: 'Body', size: 14 },
  { name: 'SubHead', size: 16 },
  { name: 'HeadLine', size: 18 },
  { name: 'Display', size: 28 },
];

const shortText1 = 'Different from a "web app"';
const shortText2 = 'Different from a "web app", "HTML5 app", or "hybrid app", you can use Weex to build a real mobile app. The code that you write is relatively simple, because you can build native applications just using HTML, CSS, Javascript.';
const LongText = 'Different from a "web app", "HTML5 app", or "hybrid app", you can use Weex to build a real mobile app. The code that you write is relatively simple, because you can build native applications just using HTML, CSS, Javascript. But underneath, the core of the application is Objective-C or Java. At the same time, Weex will provide a lot of native components or modules for developers to use.';

class TextDemo extends Component {
  constructor() {
    super();
  }
  render() {
    return (
      <Page title="Text">
        <Page.Intro main="Normal" />

        {FontSizeArr.map((item, index) => (
          <View style={styles.textLine}>
            <View style={styles.label}>
              <Text style={styles.labelText}>{item.name}</Text>
            </View>
            <View style={styles.result}>
              <Text
                style={[
                  styles.resultText,
                  { fontSize: `${item.size * 2}rem` },
                ]}
              >
                  常规 {item.size * 2} rem
              </Text>
            </View>
          </View>
        ))}
        <Page.Intro main="固定字号" sub="仅 native 生效" />
        <View style={styles.textLine}>
          <View style={styles.label}>
            <Text style={styles.labelText}>14wx</Text>
          </View>
          <View style={styles.result}>
            <Text style={[styles.resultText, { fontSize: '14wx' }]}>14wx</Text>
          </View>
        </View>
        <View style={styles.textLine}>
          <View style={styles.label}>
            <Text style={styles.labelText}>16wx</Text>
          </View>
          <View style={styles.result}>
            <Text style={[styles.resultText, { fontSize: '16wx' }]}>16wx</Text>
          </View>
        </View>
        <View style={styles.textLine}>
          <View style={styles.label}>
            <Text style={styles.labelText}>20wx</Text>
          </View>
          <View style={styles.result}>
            <Text style={[styles.resultText, { fontSize: '20wx' }]}>20wx</Text>
          </View>
        </View>
        <Page.Intro main="超出 1 行隐藏" />
        <View style={styles.paddingBlock}>
          <View style={styles.block}>
            <Text numberOfLines={1} style={[styles.blockText, { lineHeight: 48, height: 48 }]}>{LongText}
            </Text>
          </View>
        </View>
        <Page.Intro main="超出 3 行隐藏" />
        <View style={styles.paddingBlock}>
          <View style={styles.block}>
            <Text numberOfLines={3} style={[styles.blockText, { lineHeight: 48, height: 48 * 3 }]}>
              {LongText}
            </Text>
          </View>
        </View>
        <Page.Intro main="最多 2 行，可 1-2 行，超出隐藏" />
        <View style={styles.paddingBlock}>
          <View style={[styles.block, { maxHeight: 48 * 2 }]}>
            <Text numberOfLines={2} style={[styles.blockText, { lineHeight: 48, maxHeight: 48 * 2 }]}>
              {shortText1}
            </Text>
          </View>
        </View>
        <View style={styles.paddingBlock}>
          <View style={[styles.block, { maxHeight: 48 * 2 }]}>
            <Text numberOfLines={2} style={[styles.blockText, { lineHeight: 48, maxHeight: 48 * 2 }]}>
              {shortText2}
            </Text>
          </View>
        </View>
      </Page>
    );
  }
}
const styles = {
  textLine: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingLeft: '40rem',
    paddingRight: '40rem',
    marginTop: '30rem',
    flexDirection: 'row',
  },
  label: {
    width: '150rem',
  },
  labelText: {
    color: '#ea118d',
    fontSize: '20rem',
  },
  paddingBlock: {
    flexDirection: 'column',
    padding: 30,
    paddingBottom: 50,
  },
  block: {
    flex: 1,
    backgroundColor: '#cccccc',
  },
  blockText: {
    fontSize: 28,
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    color: '#333333',
  },
};
render(<TextDemo />);