如何更改 text size in React Native CSS

在React Native应用程序的开发中，有时需要对文本( Text )的大小进行自定义设置。本篇文章将介绍如何通过CSS样式表中设置text size(文本大小)来达到这一目的。

方法1: 直接在style属性中设置

在React Native中，使用内联样式( inline styling )可以很容易地更改文本的大小，只需在style属性中添加textAlign和fontSize属性。

<Text style={{textAlign:'center', fontSize:20}} > 这是一个标题</Text>

这里的fontSize属性指定文本的大小为20，可以根据自己的需要自定义。此外，textAlign属性将文本放置在容器中心。

方法2: 通过样式表设置

如果需要修改多个文本的大小，则可以通过样式表( stylesheet )来设置文本的大小。我们可以在顶部声明一个stylesheet对象，用于存放各种样式。

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

const styles = StyleSheet.create({
    titleText: {
        fontSize: 20,
        fontWeight: 'bold',
        color: 'red'
    }
});

class App extends Component {
    render() {
        return (
            <>
                <Text style={styles.titleText}>这是一个标题</Text>
                <Text>这是一段正文。</Text>
            </>
        );
    }
}

在例子中，我们在stylesheet对象中声明了一个名为titleText的样式，在render()方法中使用了这个样式。

小结

通过上述方法，我们可以轻松地在React Native中更改文本的大小。重要的是，开发人员应该选择适当的文本大小，以确保文本在不同尺寸的移动设备上都能够完美展示。