Text

Posted 2020-10-16 Da雪山

Text 组件
/*
* 常用属性:
* onPress 手指触摸时间
* numberOfLines 显示多少行
*
* 可以设置字体颜色,大小,对齐方式等
*
*
* */

/*
* 在单独的一个文件中定义子组件,使用Module.exports 将组建导出为独立的模块,可以在其他文件中引用
*
*  新建.js文件
*  引入(不用写后缀.js)
*  var Header = require("./Header")
 * */

//引入(不用写后缀.js)
var Header = require("./Header")
export default class App extends Component<> {
  render() {
    return (
        <View>
          {/*Header */}
          <Header/>
          {/*News */}

        </View>

    );
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////////
Header.js 文件

import React, { Component } from ‘react‘;
import {
    Platform,
    StyleSheet,
    Text,
    View
} from ‘react-native‘;

//组件
    var Header = React.creatClass({
        render:function () {
            return(
              <View style={styles.flex}>
                  <Text style={styles.font}>
                      <Text style={styles.font1}>网易</Text>
                      <Text style={styles.font2}>新闻</Text>
                      <Text>有态度</Text>
                  </Text>
              </View>
            );
        }

    });


//样式
var styles = StyleSheet.create({
    flex:{
        marginTop:25,
        height:40,
        borderBottomWidth:1,
        borderBottomColor:"yellow",
        alignItems:"center"
    },
    font:{
        fontSize:25,
        fontWeight:"bold",
        textAlign:"center"
    },
    font1:{
        color:"red"
    },
    font2:{
        color:"#FFF",
        backgroundColor:"#CD1D1C"

    }
})

//导出模块
module.exports = Header;