文本

import { Host, Text } from '@expo/ui/jetpack-compose';

export default function BasicTextExample() {
  return (
    <Host matchContents>
      <Text>你好，世界！</Text>
    </Host>
  );
}

import { Host, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function TypographyExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        <Text style={{ typography: 'displayLarge' }}>超大显示</Text>
        <Text style={{ typography: 'headlineMedium' }}>中等标题</Text>
        <Text style={{ typography: 'bodySmall' }}>小号正文</Text>
        <Text style={{ typography: 'labelLarge' }}>大号标签</Text>
      </Column>
    </Host>
  );
}

import { Host, Text } from '@expo/ui/jetpack-compose';
import { width } from '@expo/ui/jetpack-compose/modifiers';

export default function TextOverflowExample() {
  return (
    <Host matchContents>
      <Text maxLines={2} overflow="ellipsis" modifiers={[width(200)]}>
        这是一段很长的文本段落，它将在两行之后被截断，并在末尾显示省略号，表示还有更多内容。
      </Text>
    </Host>
  );
}

import { Host, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function StyledTextExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        <Text style={{ fontWeight: 'bold', fontSize: 20 }}>粗体文本</Text>
        <Text style={{ fontStyle: 'italic' }}>斜体文本</Text>
        <Text style={{ textDecoration: 'underline' }}>带下划线的文本</Text>
        <Text style={{ letterSpacing: 4 }}>间距加大的文本</Text>
        <Text color="#E91E63" style={{ fontSize: 18, textAlign: 'center' }}>
          有颜色且居中
        </Text>
      </Column>
    </Host>
  );
}

import { Host, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function NestedTextExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        {/* 粗体父级，斜体子级继承粗体 */}
        <Text style={{ fontWeight: 'bold' }}>
          你好 <Text style={{ fontStyle: 'italic' }}>世界</Text>！
        </Text>

        {/* 混合行内样式 */}
        <Text style={{ fontSize: 16 }}>
          普通，<Text style={{ fontStyle: 'italic' }}>斜体</Text>，{' '}
          <Text style={{ fontWeight: 'bold' }}>粗体</Text>，以及{' '}
          <Text style={{ textDecoration: 'underline' }}>下划线</Text>
        </Text>

        {/* 每个 span 的颜色和背景覆盖 */}
        <Text style={{ fontSize: 18 }}>
          点击{' '}
          <Text color="#007AFF" style={{ fontWeight: 'bold' }}>
            这里
          </Text>{' '}
          或 <Text style={{ background: '#FFEB3B' }}>高亮显示</Text>
        </Text>

        {/* 深层嵌套 — 样式会累积 */}
        <Text style={{ fontWeight: 'bold' }}>
          粗体{' '}
          <Text style={{ fontStyle: 'italic' }}>
            粗体+斜体 <Text style={{ textDecoration: 'underline' }}>粗体+斜体+下划线</Text>
          </Text>
        </Text>
      </Column>
    </Host>
  );
}

import { Host, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function CustomFontExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        <Text style={{ fontFamily: 'serif', fontSize: 16 }}>系统衬线字体</Text>
        <Text style={{ fontFamily: 'monospace', fontSize: 16 }}>系统等宽字体</Text>
        <Text style={{ fontFamily: 'Inter-Bold', fontSize: 16 }}>自定义 Inter Bold 字体</Text>
      </Column>
    </Host>
  );
}