React Native组件篇（一） — Text组件

1、什么是Text

在iOS中很多组件都有显示文字的功能，一般文字都是写在Label上。在ReactNative中类似Label显示文字的组件叫什么呢，也就是我们今天要学的这个Text组件。Text可以嵌套，设置事件处理等等

2、Text组件常用的属性方法

Attributes.style = { color string containerBackgroundColor string fontFamily string fontSize number fontStyle enum('normal', 'italic') fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') lineHeight number textAlign enum("auto", 'left', 'right', 'center') writingDirection enum("auto", 'ltr', 'rtl') numberOfLines number textAlign ("auto", 'left', 'right', 'center', 'justify') fontWeight ("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') onPress fcuntion }

属性解释对应意思：

color 字体颜色 numberOfLines (number) 进行设置Text显示文本的行数，如果显示的内容超过了行数，默认其他多余的信息就不会显示了 onPress (fcuntion) 该方法当文本发生点击的时候调用该方法 color 字体颜色 fontFamily 字体名称 fontSize 字体大小 fontStyle 字体风格(normal,italic) fontWeight 字体粗细权重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900') textShadowOffset 设置阴影效果{width: number, height: number} textShadowRadius 阴影效果圆角 textShadowColor 阴影效果的颜色 letterSpacing 字符间距 lineHeight 行高 textAlign 文本对其方式("auto", 'left', 'right', 'center', 'justify') textDecorationLine 横线位置 ("none", 'underline', 'line-through', 'underline line-through') textDecorationStyle 线的风格("solid", 'double', 'dotted', 'dashed') textDecorationColor 线的颜色 writingDirection 文本方向("auto", 'ltr', 'rtl')

allowFontScaling：控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放

adjustsFontSizeToFit：指定字体是否随着给定样式的限制而自动缩放

minimumFontScale：当adjustsFontSizeToFit开启时，指定最小的缩放比（即不能低于这个值）。可设定的值为0.01 - 1.0

suppressHighlighting：当为true时，如果文本被按下，则没有任何视觉效果。默认情况下，文本被按下时会有一个灰色的、椭圆形的高光

selectable：决定用户是否可以长按选择文本，以便复制和粘贴

2、Text组件常用的属性应用Demo

Demo代码如下：

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

class RNHybrid extends Component {

  render() {
    return(
        <View style={{marginTop:100}} >     
            <Text style={styles.TextStyle1} numberOfLines={3}  onPress={this.onPressText} >
                我是第一块代码,撒几点啦数据库卢达克里斯记得开拉就上课了大街奥盛经理对接萨克雷简单快乐撒娇恐龙当家了撒娇地阿基山莨菪碱库拉索大街奥盛恐龙当家可拉伸机打开连接爱上了你参谋，是那么，从MsABC蒙巴萨故事机奥迪和杰卡斯。
            </Text>
             <Text style={{marginBottom:20}} onPress={()=>{alert('我是箭头函数')}}>
                我是第二块代码
            </Text>
            <Text selectable={true}>
                我是第三块代码,长按我可以复制我。
            </Text>   
        </View>
      );
  }

  onPressText(){
    alert('点击demo')
  }
}

const styles = StyleSheet.create({
    TextStyle1:{
        marginBottom:20,
        color:'red',
        fontFamily:'Times',
        fontSize:20,
        fontStyle:'italic',
        fontWeight:('bold', '700'),
        textShadowOffset:{width:3, height:5},
        textShadowColor:'black',
        textShadowRadius:3,
    },
});

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);

效果图：

总结：属性主要试了几个通用的，属性效果大家可以自行测试，注意看下Demo 中onpress两种表达方式，在以后的开发中，慢慢就会感知到利弊。

3、Text组件的嵌套和继承

嵌套使用Demo代码：

render() {
    return(
        <View style={{marginTop:100}}>
            <Text style={{color:'red',textAlign:'center',textDecorationLine:'underline',fontSize:10,lineHeight:50}} >  
             {'\r'}我是最外面的红色 
               <Text style={{color:'blue',fontSize:20}}>   
                 {'\r'}我是中间的蓝色  
                  <Text style={{color:'black',textDecorationLine:'line-through',textDecorationColor:'green',textDecorationStyle:'double'}}>  
                    {'\r'}我是最里面的黑色 
                  </Text>  
                  <Text>  
                    {'\r'}我没有属性都是继承父控件 
                  </Text>
                </Text>  
            </Text>   
        </View>
      );
  }

效果如下：

     总结： 在嵌套的Text组件中，子Text组件将继承它的父Text组件的样式，当使用嵌套的Text组件时，子Text组件不能覆盖从父Text组件继承而来的样式，只能增加父Text组件没有指定的样式。

      注意点：默认情况下嵌套的Text是不换行的，子控件的内容跟在父控件的后面，加上{'\r'}或者{'\n'}换行显示.