React-Native 之 Text的使用

Text 组件常用的属性和方法

---

• color：字体颜色

      // 字体颜色
      color:'blue'
  
  

  效果：

 

字体颜色

• numberOfLines：设置 Text 显示文本的行数，如果显示的内容超过行数，默认其余的文本信息不再显示

      render() {
          return (
              <View style={styles.container}>
                  <Text style={styles.textStyle} numberOfLines={3}>雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest雨泽Forest</Text>
              </View>
          );
      }
  
  

  效果：

  
  
   

  

  设置行数

• fontSize：字体大小

      // 字体大小
      fontSize:30
          
  

  效果：

  
  
   

  

  文字大小

• fontFamily：字体名称

      // 字体类型
      fontFamily:'Georgia'
  
  

  效果：

  
  
   

  

  字体类型

• fontStyle（'normal', 'italic'）：字体风格

      // 字体风格
      fontStyle:'italic'
  
  

  效果：

  
  
   

  

  字体风格

• fontWeight（'normal', 'bold', '100 ~ 900'）：指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值

      // 字体粗细
      fontWeight:('bold', '700')
  
  

  效果：

  
  
   

  

  字体粗细

• textShadowOffset（ number, height: number）：设置阴影效果

• textShadowColor：阴影效果颜色

      // 阴影
      textShadowOffset:{3, height:5},
      // 阴影颜色
      textShadowColor:'black'
  
  

  效果：

  
  
   

  

  阴影效果和阴影颜色

• textShadowRadius：阴影效果圆角（值越大阴影越模糊）

      // 阴影圆角
      textShadowRadius:3
  
  

  效果：

  
  
   

  

  阴影圆角

• letterSpacing：字符间距

      // 字符间距
      letterSpacing:5
  
  

  效果：

  
  
   

  

  字符间距

• lineHeight：行高

      // 行高
      lineHeight:25
  
  

  效果：

  
  
   

  

  行高

• textAlign（'auto', 'left', 'right', 'center', 'justify'）：文本对齐方式

  • auto
    
    
    

      // 文本对齐方式
      textAlign:'auto'
  
  

  效果：

  
  
   

  

  auto
  • left
    
    
    

      // 文本对齐方式
      textAlign:'left'
  
  

  效果：

  
  
   

  

  left
  • right
    
    
    

      // 文本对齐方式
      textAlign:'right'
  
  

  效果：

  
  
   

  

  right
  • center
    
    
    

      // 文本对齐方式
      textAlign:'center'
  
  

  效果：

  
  
   

  

  center
  • justify
    
    
    

      // 文本对齐方式
      textAlign:'justify'
  

  效果：

  
  
   

  

  justify

• textDecorationLine（'none', 'underline', 'line-through'）：横线位置

  • none：没有横线
  • underline：
    
    
    

      // 横线
      textDecorationLine:'underline'
  
  

  效果：

  
  
   

  

  underline
  • line-through:
    
    
    

      // 横线
      textDecorationLine:'line-through'
  
  

  效果：

  
  
   

  

  line-through

• textDecorationStyle（'solid', 'double', 'dotted', 'dashed'）：线风格

  • solid
    
    
    

      // 横线风格
      textDecorationStyle:'solid'
  
  

  效果：

  
  
   

  

  solid
  • double
    
    
    

      // 横线风格
      textDecorationStyle:'double'
  
  

  效果：

  
  
   

  

  double
  • dotted
    
    
    

      // 横线风格
      textDecorationStyle:'dotted'
  
  

  效果：

  
  
   

  

  dotted
  • dashed
    
    
    

      // 横线风格
      textDecorationStyle:'dashed'
  
  

  效果：

  
  
   

  

  dashed

• textDecorationColor：线的颜色

      // 线的颜色
      textDecorationColor:'black',
  
  

  效果：

  
  
   

  

  线的颜色

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

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

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

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

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

      render() {
          return (
              <View style={styles.container}>
                  <Text style={styles.textStyle}
                      selectable={true}
                  >
                      雨泽Forest
                  </Text>
              </View>
          );
      }
  
  

  效果：

  
  
   

  

  selectable.gif

• testID：用来在端到端测试中标记这个视图

• onPress：当文本发生点击的时候调用该方法

      render() {
          return (
              <View style={styles.container}>
                  <Text style={styles.textStyle}
                      onPress={()=>{alert('点击')}}
                  >
                      雨泽Forest
                  </Text>
              </View>
          );
      }
  
  

  效果：

  
  
   

  

  onPress.gif

• onLongPress：当文本被长按以后调用此回调函数（参考onPress）

• onLayout：当挂载或者布局变化以后调用（参数为：{nativeEvent: {layout: {x, y, width, height}}}）(参考onPress)

Text 使用

---

• 视图部分

      render() {
          return (
              <View style={styles.container}>
                  <Text style={styles.textStyle}>雨泽Forest</Text>
              </View>
          );
      }
  
  

• 样式部分

      var styles = StyleSheet.create({
          container: {
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'green',
          },
  
          textStyle: {
              // 背景色
              backgroundColor:'yellow',
              // 字体大小
              fontSize:30,
              // 下划横线
              textDecorationLine:'underline'
          }
  
      });
  
  

  效果：

Text 组件的嵌套使用

---

• 视图部分

      var test = React.createClass({
          render() {
              return (
                  <View style={styles.container}>
                      <Text style={styles.textStyle} numberOfLines={3}>
                      雨泽
                      <Text style={{color:'orange'}}>
                              Forest
                      </Text>
                      </Text>
                  </View>
              );
          }
      });
  
  

• 样式部分

      var styles = StyleSheet.create({
          container: {
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'green',
          },
  
          textStyle: {
              // 字体颜色
              color:'blue',
              // 字体大小
              fontSize:30
          }
  
      });
  
  

  效果：

  
  
   

  

  嵌套使用

Text 组件中样式的继承

---

• 在 React Native 中是没有样式继承这种说法的，但对于 Text 元素里边的 Text 元素，其实是可以继承的，至于是单继承还是多继承，我们可以来试验一下

  • 视图部分
    
    
    

      var test = React.createClass({
          render() {
              return (
                  <View style={styles.container}>
                      <Text style={styles.textStyle} numberOfLines={3}>
                          <Text>
                              <Text>雨泽Forest</Text>
                          </Text>
                      </Text>
                  </View>
              );
          }
      });
  
  

  • 样式部分
    
    
    

      var styles = StyleSheet.create({
          container: {
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'green',
          },
  
          textStyle: {
              // 字体颜色
              color:'blue',
              // 字体大小
              fontSize:30
          }
  
      });
  
  

  效果：

  
  
   

  

  样式继承关系

• 通过试验我们可以看出，文字控制类的属性也是多继承的，和 CSS 是一样的,而且会取与自己最近的属性归自己所用，也就是说属性可覆盖

https://www.jianshu.com/p/7d435e199c96