ReactNative Text 组件

来源:互联网 发布:Linux命令dd与cp区别 编辑:程序博客网 时间:2024/05/18 11:01

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",    }});


原创粉丝点击