ReactNative Text 组件_reactnative text 富文本-CSDN博客

本文链接：https://blog.csdn.net/GL_MINE_CSDN/article/details/73647857

本文通过一个React Native的应用示例介绍了如何使用Text组件来显示新闻标题等内容，并展示了基本的样式设置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ReactNative Text 组件。

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    TextInput,
    Image,
} from 'react-native';

let RnDemo = React.createClass({
    render: function () {
        //定义数组存储新闻信息
        var news = ["1.------",
            "2-------",
            "3-------",
            "4----------------------------------"
            +"--------------------------------------------"
            +"-----------------------------------"];
        return (
            <View style={styles.item}>
                {/*Header*/}
                <Header/>
                {/*News*/}
                <News news={news}/>
            </View>
        );
    }
});

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

//组件
let Header = React.createClass({
    render: function () {
        return (
            <View style={styles.flex}>
                <Text style={styles.font}>
                    <Text style={styles.font_1}>网易</Text>
                    <Text style={styles.font_2}>新闻</Text>
                    <Text>有态度</Text>
                </Text>
            </View>
        );
    }
});
//样式
let styles = StyleSheet.create({
    flex: {
        marginTop: 25,
        height: 40,
        borderBottomWidth: 1,
        borderBottomColor: "#EF2D36",
        alignItems: "center",
    },
    //字体设置的公共部分
    font: {
        fontSize: 25,
        fontWeight: "bold",
        textAlign: "center",
    },
    font_1: {
        color: "#CD1D1C",
    },
    font_2: {
        color: "#FFF",
        backgroundColor: "#CD1D1C",

    }
});