React Native实战系列第六篇 — Text组件

一、什么是Text组件？

• 一个用于显示文本的React组件，和Android中的TextView组件或者OC中的Label组件相类似，专门用来显示基本的文本信息；除了基本的显示布局之外，可以进行嵌套显示，设置样式，以及可以做事件(例如:点击)处理；

<p></p>
<p></p>

二、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')

<p></p>
<p></p>

三、Text组件中常用属性的应用

• 案例实操代码：

export default class JHReactDemo extends Component {
  render() {
    return (
      <View style={styles.outerViewStyle}>
         <Text
             style={styles.textStyle}
             numberOfLines={5} // 设置总行数
         >
            大家好! 我是旋之华!
         </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  outerViewStyle: {
    flex:1,
    marginTop:30,
    backgroundColor:'red'
  },

  textStyle:{
    backgroundColor:'red',
    color:'yellow',
    textAlign:'left',
    width:300,
    lineHeight:30,
    fontSize:18,
    fontWeight:'bold',
    letterSpacing:5, // 缩进
    textDecorationLine:'underline',
    textDecorationColor:'green',
    textDecorationStyle:'double'
  }
});

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

<p></p>
<p></p>

案例运行结果

三、Text组件中样式的继承

• 在React-native中是没有样式继承这种说法的， 但是对于Text元素里边的Text元素，其实是能够继承的，那么是单层继承还是多层继承？

• 代码演示：

render() {
    return (
      <View style={styles.outerViewStyle}>
       <Text style={{color:'blue'}}>
         <Text
             style={styles.textStyle}
             numberOfLines={3} // 设置总行数
         >
           大家好! 我是旋之华! {'\n'}
           今天天气很不错!{'\n'}
         </Text>
       </Text>
      </View>
    );
  }

运行结果

• 结论：文字控制类的属性也是多重继承的，和css中是一样的。

长按图片-->识别图中二维码

近期正在把公众账号的文章转移到简书，如果要了解第一动态，请关注我的微信公众账号号，带你从零到一的进行React Native开发实战，在其他文章中会有对应的code和资料发放！