Text（文本组件）

React Native 核心基础

在 React Native 中，Text 是用于显示文本的核心组件。它相当于 web 开发中的 p 或 span 元素，但具有更多的移动设备特定功能。

1. 什么是 Text 组件？

Text 组件是 React Native 中用于显示文本的基本组件。它支持多种文本样式、嵌套文本、触摸事件等功能。

主要功能

文本显示：显示普通文本内容
文本样式：支持字体大小、颜色、字重等样式
嵌套文本：支持在 Text 组件内嵌套其他 Text 组件，实现不同样式的文本
触摸事件：支持 onPress 等触摸事件
可访问性：支持可访问性属性

2. 基本用法

简单使用

jsx

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

export default function TextExample() {
  return (
    <View style={styles.container}>
      <Text>Hello, React Native!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

带样式的文本

jsx

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

export default function StyledText() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Welcome to React Native</Text>
      <Text style={styles.subtitle}>This is a subtitle</Text>
      <Text style={styles.body}>This is the body text. It can be multiple lines.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 18,
    color: '#666',
    marginBottom: 10,
  },
  body: {
    fontSize: 16,
    color: '#999',
    lineHeight: 24,
  },
});

嵌套文本

jsx

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

export default function NestedText() {
  return (
    <View style={styles.container}>
      <Text>
        Hello <Text style={styles.bold}>React</Text> <Text style={styles.italic}>Native</Text>
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  bold: {
    fontWeight: 'bold',
  },
  italic: {
    fontStyle: 'italic',
  },
});

3. 常用属性

样式属性

属性	描述	示例
`style`	样式对象或样式数组	`style={ { fontSize: 16, color: 'red' } }`
`numberOfLines`	显示的最大行数	`numberOfLines={2}`
`ellipsizeMode`	文本截断模式	`ellipsizeMode="tail"`
`adjustsFontSizeToFit`	是否自动调整字体大小	`adjustsFontSizeToFit={true}`
`selectable`	是否可选择	`selectable={true}`
`testID`	用于测试的标识符	`testID="text"`

触摸事件属性

属性	描述	示例
`onPress`	点击事件	`onPress={() => console.log('Text pressed')}`
`onLongPress`	长按事件	`onLongPress={() => console.log('Text long pressed')}`

4. 高级用法

文本对齐

jsx

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

export default function TextAlignment() {
  return (
    <View style={styles.container}>
      <Text style={styles.left}>Left aligned text</Text>
      <Text style={styles.center}>Center aligned text</Text>
      <Text style={styles.right}>Right aligned text</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  left: {
    textAlign: 'left',
    marginBottom: 10,
  },
  center: {
    textAlign: 'center',
    marginBottom: 10,
  },
  right: {
    textAlign: 'right',
  },
});

多行文本

jsx

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

export default function MultilineText() {
  return (
    <View style={styles.container}>
      <Text style={styles.multiline} numberOfLines={3} ellipsizeMode="tail">
        This is a long text that will be truncated after 3 lines. It demonstrates how to handle long text in React Native.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  multiline: {
    fontSize: 16,
    lineHeight: 24,
  },
});

可点击文本

jsx

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

export default function ClickableText() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.clickable} onPress={() => setCount(count + 1)}>
        Click me! Clicked {count} times
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  clickable: {
    fontSize: 18,
    color: 'blue',
    textDecorationLine: 'underline',
  },
});

5. 性能优化

1. 避免不必要的重新渲染

使用 React.memo 包装文本组件，避免不必要的重新渲染
避免在 render 方法中创建新的样式对象

jsx

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

const MemoizedText = memo(({ text }) => {
  console.log('MemoizedText rendered');
  return <Text style={styles.text}>{text}</Text>;
});

export default function OptimizedText() {
  return (
    <View>
      <MemoizedText text="Hello" />
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 16,
  },
});

2. 合理使用样式

使用 StyleSheet.create 创建样式，而不是内联样式
对于重复使用的样式，提取为常量

jsx

// 推荐
const styles = StyleSheet.create({
  text: {
    fontSize: 16,
    color: '#333',
  },
});

// 不推荐
<Text style={{ fontSize: 16, color: '#333' }}>Hello</Text>

3. 避免过度嵌套

避免过度嵌套 Text 组件
过度嵌套会导致渲染性能下降

jsx

// 推荐
<Text>
  Hello <Text style={styles.bold}>React</Text> Native
</Text>

// 不推荐
<Text>
  Hello <Text style={styles.bold}>React <Text style={styles.italic}>Native</Text></Text>
</Text>

6. 常见错误与解决方案

错误 1：忘记导入 Text 组件

错误：

jsx

import { View } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello</Text> {/* 错误：Text 未导入 */}
    </View>
  );
}

解决方案：

jsx

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

export default function App() {
  return (
    <View>
      <Text>Hello</Text>
    </View>
  );
}

错误 2：在非 Text 组件内嵌套 Text 组件

错误：

jsx

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

export default function App() {
  return (
    <View>
      Hello <Text>React</Text> Native {/* 错误：在 View 内直接嵌套文本 */}
    </View>
  );
}

解决方案：

jsx

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

export default function App() {
  return (
    <View>
      <Text>Hello <Text>React</Text> Native</Text> {/* 正确：在 Text 内嵌套文本 */}
    </View>
  );
}

错误 3：样式属性名称错误

错误：

jsx

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

export default function App() {
  return (
    <View>
      <Text style={styles.text}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
    font-size: 16, // 错误：使用了连字符
    color: 'red',
  },
});

解决方案：

jsx

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

export default function App() {
  return (
    <View>
      <Text style={styles.text}>Hello</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  text: {
    fontSize: 16, // 正确：使用驼峰命名法
    color: 'red',
  },
});

7. 最佳实践

1. 文本样式管理

使用 StyleSheet.create 创建样式
为不同类型的文本定义统一的样式
考虑使用样式主题

2. 文本内容处理

对于长文本，使用 numberOfLines 和 ellipsizeMode 控制显示
对于需要换行的文本，使用 \n 或设置适当的 lineHeight
对于可点击的文本，添加适当的样式提示

3. 性能优化

避免在 render 方法中创建新的样式对象
对于静态文本，使用 React.memo 包装组件
避免过度嵌套 Text 组件

4. 可访问性

为 Text 组件添加适当的 accessibilityLabel
确保文本颜色与背景颜色有足够的对比度

8. 总结

Text 是 React Native 中用于显示文本的核心组件。通过合理使用 Text 组件，你可以创建出各种文本效果。

在使用 Text 组件时，要注意：

合理使用样式，创建统一的文本风格
对于长文本，使用 numberOfLines 和 ellipsizeMode 控制显示
避免在非 Text 组件内直接嵌套文本
考虑性能优化，避免不必要的重新渲染

掌握 Text 组件的使用，是创建美观、可读性强的 React Native 应用的基础。在接下来的教程中，我们将学习更多的核心组件，如 Image、TextInput 等。

Text（文本组件） ​

React Native 核心基础 ​

1. 什么是 Text 组件？ ​

主要功能 ​

2. 基本用法 ​

简单使用 ​

带样式的文本 ​

嵌套文本 ​

3. 常用属性 ​

样式属性 ​

触摸事件属性 ​

4. 高级用法 ​

文本对齐 ​

多行文本 ​

可点击文本 ​

5. 性能优化 ​

1. 避免不必要的重新渲染 ​

2. 合理使用样式 ​

3. 避免过度嵌套 ​

6. 常见错误与解决方案 ​

错误 1：忘记导入 Text 组件 ​

错误 2：在非 Text 组件内嵌套 Text 组件 ​

错误 3：样式属性名称错误 ​

7. 最佳实践 ​

1. 文本样式管理 ​

2. 文本内容处理 ​

3. 性能优化 ​

4. 可访问性 ​

8. 总结 ​

Text（文本组件）

React Native 核心基础

1. 什么是 Text 组件？

主要功能

2. 基本用法

简单使用

带样式的文本

嵌套文本

3. 常用属性

样式属性

触摸事件属性

4. 高级用法

文本对齐

多行文本

可点击文本

5. 性能优化

1. 避免不必要的重新渲染

2. 合理使用样式

3. 避免过度嵌套

6. 常见错误与解决方案

错误 1：忘记导入 Text 组件

错误 2：在非 Text 组件内嵌套 Text 组件

错误 3：样式属性名称错误

7. 最佳实践

1. 文本样式管理

2. 文本内容处理

3. 性能优化

4. 可访问性

8. 总结