React Native Academy · 课时

显示文本与设置字体样式

使用 Text 组件渲染文本，应用 fontSize、fontWeight、color 和 lineHeight 样式，并妥善处理多行内容。

第 2 / 4 课13 个步骤

显示文本与设置字体样式 是 CoddyKit 上的免费 React Native Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 React Native Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Native Academy 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

The Text Component Basics

In React Native, every word lives inside a Text component. Loose strings outside one will crash — so Text wraps all the text you show.

import { View, Text } from 'react-native';

export default function Greeting() {
  return (
    <View>
      <Text>Hello, World!</Text>
      {/* This would cause an error: */}
      {/* Hello, World!  ← raw string outside Text */}
    </View>
  );
}

fontSize and fontWeight

Size text with fontSize (a number) and thickness with fontWeight like "bold" or "600". Custom fonts may only have some weights, so test on a real device.

import { Text, View, StyleSheet } from 'react-native';

export default function Typography() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={styles.h1}>Heading 1</Text>
      <Text style={styles.h2}>Heading 2</Text>
      <Text style={styles.body}>Regular body text for paragraphs.</Text>
      <Text style={styles.caption}>Small caption text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  h1: { fontSize: 32, fontWeight: '700', color: '#111' },
  h2: { fontSize: 24, fontWeight: '600', color: '#333' },
  body: { fontSize: 16, fontWeight: '400', color: '#555', lineHeight: 24 },
  caption: { fontSize: 12, fontWeight: '300', color: '#999' },
});

color and lineHeight

Set the text color with a hex or named value, and use lineHeight to space lines apart. A little breathing room makes longer text far easier to read.

import { Text, StyleSheet } from 'react-native';

export default function Article() {
  return (
    <Text style={styles.paragraph}>
      React Native brings the best parts of mobile development
      together, combining a smooth native experience with the
      speed of JavaScript development.
    </Text>
  );
}

const styles = StyleSheet.create({
  paragraph: {
    fontSize: 16,
    color: '#444',
    lineHeight: 26,     // 26/16 = 1.625× line height
    letterSpacing: 0.2, // slight tracking for readability
  },
});

textAlign and Text Decoration

Position text with textAlign (left, center, right) and dress it up with textDecorationLine for underlines or textTransform for uppercase — just like CSS.

import { Text, View, StyleSheet } from 'react-native';

export default function TextStyling() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={styles.centered}>Centered heading</Text>
      <Text style={styles.link}>Tap to visit website</Text>
      <Text style={styles.strikethrough}>Old price: $29.99</Text>
      <Text style={styles.uppercase}>sale ends tonight</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  centered: { textAlign: 'center', fontSize: 20, fontWeight: 'bold' },
  link: { color: '#0066cc', textDecorationLine: 'underline' },
  strikethrough: { textDecorationLine: 'line-through', color: '#999' },
  uppercase: { textTransform: 'uppercase', letterSpacing: 2, fontSize: 14 },
});

Nested Text for Mixed Styles

Nest Text inside Text to mix styles in one line, like a single bold word. Inner Text inherits the parent style and overrides only what you set.

import { Text, View } from 'react-native';

export default function MixedText() {
  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 16, color: '#333' }}>
        Welcome back,{' '}
        <Text style={{ fontWeight: 'bold', color: '#0066cc' }}>
          Alice
        </Text>
        ! You have{' '}
        <Text style={{ color: 'red', fontWeight: '600' }}>3</Text>
        {' '}unread messages.
      </Text>
    </View>
  );
}

numberOfLines and ellipsizeMode

Use numberOfLines to cap how many lines show, and ellipsizeMode to add the "..." at the end. Great for list titles that should never wrap forever.

import { Text, View, StyleSheet } from 'react-native';

const longTitle = 'The Complete Guide to Building Production-Ready React Native Applications in 2024';

export default function TruncatedText() {
  return (
    <View style={{ padding: 16 }}>
      <Text numberOfLines={1} ellipsizeMode='tail' style={styles.title}>
        {longTitle}
      </Text>
      <Text numberOfLines={2} ellipsizeMode='tail' style={styles.body}>
        {longTitle}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 8 },
  body: { fontSize: 14, color: '#666' },
});

Loading Custom Fonts with expo-font

Want your own font? Drop a .ttf in assets, then load it with the useFonts hook from expo-font. Wait until it is ready to avoid a flash of plain text.

import { useFonts } from 'expo-font';
import { Text, View } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    'Poppins-Regular': require('./assets/fonts/Poppins-Regular.ttf'),
    'Poppins-Bold': require('./assets/fonts/Poppins-Bold.ttf'),
  });

  if (!fontsLoaded) return null; // Show splash or null while loading

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontFamily: 'Poppins-Bold', fontSize: 24 }}>
        Custom Font Heading
      </Text>
      <Text style={{ fontFamily: 'Poppins-Regular', fontSize: 16 }}>
        Body text with Poppins Regular.
      </Text>
    </View>
  );
}

Google Fonts with @expo-google-fonts

Even easier: the @expo-google-fonts packages bundle any Google Font for you. Install one, import the hook, and use its name — no manual files needed.

import { useFonts, Inter_400Regular, Inter_700Bold } from '@expo-google-fonts/inter';
import { Text, View } from 'react-native';

export default function App() {
  const [fontsLoaded] = useFonts({
    Inter_400Regular,
    Inter_700Bold,
  });

  if (!fontsLoaded) return null;

  return (
    <View style={{ padding: 24 }}>
      <Text style={{ fontFamily: 'Inter_700Bold', fontSize: 24 }}>
        Inter Bold
      </Text>
      <Text style={{ fontFamily: 'Inter_400Regular', fontSize: 16 }}>
        Inter Regular body text.
      </Text>
    </View>
  );
}

Selectable Text and onPress

By default Text cannot be copied. Add the selectable prop to allow it, or an onPress handler to make a word act like a tappable link.

import { Text, View, Alert } from 'react-native';

export default function InteractiveText() {
  return (
    <View style={{ padding: 16 }}>
      {/* Selectable text (user can copy) */}
      <Text selectable style={{ fontSize: 14, color: '#333', marginBottom: 16 }}>
        Long-press to select and copy this text.
      </Text>

      {/* Tappable text link */}
      <Text
        style={{ color: '#0066cc', fontSize: 16 }}
        onPress={() => Alert.alert('Link tapped!')}
        accessibilityRole='link'
      >
        Terms and Conditions
      </Text>
    </View>
  );
}

Handling Multiline and Long Content

Text wraps on its own when it runs out of room. Inside a flex row, add flexShrink: 1 so a long line shrinks instead of pushing things off screen.

import { Text, View, StyleSheet, ScrollView } from 'react-native';

export default function Article() {
  return (
    <ScrollView contentContainerStyle={{ padding: 16 }}>
      <View style={styles.row}>
        <Text style={styles.label}>Title:</Text>
        {/* flexShrink prevents overflowing the row */}
        <Text style={styles.value} numberOfLines={1}>
          A Very Long Article Title That Would Otherwise Overflow
        </Text>
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', gap: 8 },
  label: { fontWeight: 'bold', color: '#333' },
  value: { flexShrink: 1, color: '#666' },
});

Text Accessibility: accessibilityLabel

For screen reader users, add an accessibilityLabel to Text that is not self-explanatory. It helps VoiceOver and TalkBack describe your app clearly.

import { Text, View, TouchableOpacity } from 'react-native';

export default function AccessibleText() {
  return (
    <View>
      {/* Screen reader will say: 'Alice, 5 unread messages' */}
      <View accessible accessibilityLabel='Alice, 5 unread messages'>
        <Text style={{ fontWeight: 'bold' }}>Alice</Text>
        <Text style={{ color: 'red' }}>5</Text>
      </View>

      <TouchableOpacity
        accessibilityLabel='Delete account'
        accessibilityHint='Double tap to permanently delete your account'
      >
        <Text style={{ color: 'red' }}>Delete</Text>
      </TouchableOpacity>
    </View>
  );
}

Quick Check

Quick check! Lock in what you learned about Text and fonts. ✨

在交互式课程中回答

Lesson Recap

Great job! All text lives in Text, fontSize and color shape it, and expo-font makes custom typefaces easy. Next up: showing images.

免费开始

用 AI 导师学习 JavaScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 30
课程: 120

免费开始学习查看完整课程

常见问题解答

「显示文本与设置字体样式」课时是免费的吗？

是的 — 「显示文本与设置字体样式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Native Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Native Academy 课程共包含 4 节课。

「显示文本与设置字体样式」这节课中我会学到什么？

使用 Text 组件渲染文本，应用 fontSize、fontWeight、color 和 lineHeight 样式，并妥善处理多行内容。你通过在浏览器中直接运行的动手代码来练习 React Native Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Native Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 React Native Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「显示文本与设置字体样式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 React Native Academy 课中编写并运行代码吗？

能。每节 React Native Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 React Native Academy