React Native 文本

摘要：在本教程中，您将了解 React Native Text 组件以及如何使用它在您的移动应用程序中显示文本。

React Native Text 组件简介

要显示文本在你的移动应用程序，可以使用Text组件。Text 组件支持样式、嵌套和触摸处理。

要使用 Text 组件，请执行以下步骤

首先，从 react-native 库导入Text组件

import {Text} from 'react-native';Code language: JavaScript (javascript)

其次，将文本放在Text组件中

<Text>Hi there!</Text>Code language: JavaScript (javascript)

样式化 Text 组件

默认情况下，Text组件使用默认样式来呈现文本。例如，Text 组件具有黑色颜色和系统字体系列（例如，Android 上的 Roboto 和 iOS 上的SF Pro）。

要将自定义样式应用于 Text 组件，可以使用style属性。Text组件支持各种样式，包括字体大小、颜色、对齐方式等。

例如，以下设置文本的字体大小为 16 并将其居中对齐

<Text style={{ fontSize: 16, textAlign: center }}>Hi there!</Text>Code language: JavaScript (javascript)

要将样式与组件分开，可以使用StyleSheet。在以下示例中，我们创建一个带有text样式的StyleSheet对象，并在Text组件中使用它

<Text style={styles.text}>Hi there!</Text>

// ...
const styles = StyleSheet.create({
    text: {
       fontSize: 16,
       textAlign: center
    }
});Code language: JavaScript (javascript)

以下是一个完整的示例

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

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.text}>Hi, there!</Text>
        </SafeAreaView>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    text: {
        fontSize: 16,
        textAlign: 'center',
    },
});

export default App;Code language: JavaScript (javascript)

嵌套 Text 组件

Text 组件可以像这样彼此嵌套

<Text>
   <Text>Learn from the best </Text>
   <Text>React Native Tutorial.</>
</Text>Code language: JavaScript (javascript)

React Native 将文本作为单个文本组件中的文本呈现

Learn from the best React Native Tutorial.Code language: JavaScript (javascript)

这在您希望将不同的样式应用于文本的不同部分时很有用。

例如，您可以将 React Native 教程设置为粗体，如下所示

<Text>
    <Text>Learn from the best </Text>
    <Text style={{ fontWeight: 'bold' }}>React Native Tutorial</Text>
</Text>Code language: JavaScript (javascript)

此外，嵌套的文本组件将自动继承父文本组件的样式。例如，如果将父 Text 组件的字体大小设置为 40，则嵌套的 Text 组件的字体大小也将设置为 40

<Text style={{ fontSize: 40 }}>
   <Text>Learn from the best </Text>
   <Text style={{ fontWeight: 'bold' }}>React Native Tutorial</Text>
</Text>Code language: JavaScript (javascript)

以下是一个完整的组件

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

const App = () => {
    return (
        <SafeAreaView style={styles.container}>
            <Text style={{ fontSize: 40 }}>
               <Text>Learn from the best </Text>
               <Text style={{ fontWeight: 'bold' }}>React Native Tutorial</Text>
            </Text>
        </SafeAreaView>
    );
};

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

export default App;Code language: JavaScript (javascript)

输出

添加触摸事件

当您按下 Text 组件时，它可以对按下事件做出反应。以下示例演示了如何将文本组件样式化为按钮并处理按下事件

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

const App = () => {
    const handlePress = () => Alert.alert('Text Pressed!');
    return (
        <SafeAreaView style={styles.container}>
            <Text style={styles.button} onPress={handlePress}> Click me</Text>
        </SafeAreaView >
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
    },
    button: {
        fontSize: 18,
        textAlign: 'center',
        padding: 10,
        borderRadius: 99,
        fontWeight: 'bold',
        color: '#fff',
        backgroundColor: 'black',
    }
});

export default App ;Code language: JavaScript (javascript)

输出

Text组件可以具有自定义字体。但是，您需要在将自定义字体应用于Text组件之前将其加载到您的应用程序中。

总结

• 使用 React Native Text 组件在您的移动应用程序中显示文本。