美文网首页
笔记一之Text

笔记一之Text

作者: Ezea | 来源:发表于2018-07-20 12:24 被阅读16次

    属性

    1. numberOfLines 文本行数限制,添加后超过限制行数文本会在末尾默认以...的形式省略。

    2. ellipsizeMode 设置文本缩略格式,配合numberOfLines使用,values:

    • tail:在末尾...省略(默认值)
    • clip:在末尾切割,直接切割字符无省略符
    • head:在前面...省略
    • middle:在中间...省略
    1. onPress 点击事件

    2. style 样式

    样式

    1. color 字体颜色

    2. fontSize 字体大小

    3. fontFamily 字体

    4. fontStyle 字的样式 (normal:正常 italic:斜体)

    5. fontWeight 设置粗体(normal:正常 bold:粗体100,200,300, 400, 500, 600, 700, 800, 900)

    6.lineHeight 行高

    7.textAlign 文字对其方式(auto:自动对齐left:左对齐right:右对齐 center:居中对齐)

    8: textDecorationLine 下划线和删除线样式(none:无线underline:下划线line-through:删除线 underline line-through:下划线和删除线)

    export default class Lession01 extends Component {
    
    
    
        onVBTextClick() {
    
            console.log('--click--');
    
        }
    
    
    
      render() {
    
        return (
    
          <View style={styles.container}>
    
            <Text 
    
                style={styles.vb_text} 
    
                numberOfLines={2} 
    
                onPress={this.onVBTextClick} 
    
                ellipsizeMode='tail'
    
                >
    
                On Thanksgiving, celebrated in America on the last Thursday of November, 
    
                friends and families gather around tables to feast and give   thanks. 
    
                This holiday has origins dating back nearly 400 years when early American 
    
                settlers met the Native American Wampanoag people.
    
            </Text>
    
           </View>
    
        );
    
      }
    
    }
    
    
    
    const styles = StyleSheet.create({
    
      container: {
    
        flex: 1,
    
        justifyContent: 'center',
    
        alignItems: 'center',
    
        backgroundColor: '#F5FCFF',
    
      },
    
      vb_text: {
    
        color: '#333333',
    
        fontFamily: 'Times',
    
        margin: 10,
    
        fontSize: 12,       
    
        textAlign: 'auto',
    
        lineHeight: 22,     //行高
    
        fontStyle: 'italic',    //设置文字:normal:正常体;italic:斜体
    
        fontWeight: 'bold', //设置粗体    字,'normal' /*default*/, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'
    
        textDecorationLine: 'underline line-through',//下划线和删除线的样式:['none' /*default*/, 'underline', 'line-through', 'underline line-through'
    
      },
    
    });

    相关文章

      网友评论

          本文标题:笔记一之Text

          本文链接:https://www.haomeiwen.com/subject/icvfmftx.html