React Native 基础组件之 Text

Text 组件对应于 Android 平台的 TextView ，用来显示文本。无论做什么应用几乎都要使用它，可以说是应用最频繁的组件之一。

1. Style

1.1 字体相关

name	type	desc
fontFamily	enum(‘sans-serif’, ‘serif’,’monospace’,’sans-serif-light’,’sans-serif-thin’,’sans-serif-condensed’,’sans-serif-medium’)	英文字符串的样式
fontSize	number	字体大小
fontStyle	enum(‘normal’, ‘italic’)	字体风格是普通还是斜体
fontWeight	enum(‘normal’, ‘bold’, ‘100’, ‘200’, ‘300’, ‘400’, ‘500’, ‘600’, ‘700’, ‘800’, ‘900’)	字体粗细程度

实例代码：

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style = {styles.textStyle1}>React Native</Text>
        <Text style = {styles.textStyle2}>React Native</Text>
        <Text style = {styles.textStyle3}>React Native</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  textStyle1: {
    fontFamily: 'monospace',
    fontSize: 20,
    fontStyle: 'normal',
    fontWeight: '900'
  },
  textStyle2: {
    fontFamily: 'serif',
    fontSize: 20,
    fontStyle: 'normal',
    fontWeight: '900'
  },
  textStyle3: {
    fontFamily: 'serif',
    fontSize: 20,
    fontStyle: 'italic',
    fontWeight: '300'
  },
  
});

效果图：

font

1.2 阴影相关

name	type	desc
textShadowColor	string (color)	阴影颜色
textShadowOffset	{width: number, height: number}	阴影效果
textShadowRadius	number	阴影圆角

实例代码：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  textStyle1: {
    fontSize: 20,
    textShadowColor: 'blue',
    textShadowOffset: {width: 5, height: 5},
    textShadowRadius: 1
  },
  textStyle2: {
    fontSize: 20,
    textShadowColor: 'blue',
    textShadowOffset: {width: 5, height: 5},
    textShadowRadius: 5

  },
  textStyle3: {
    fontSize: 20,
    textShadowColor: 'blue',
    textShadowOffset: {width: 2, height: 2},
    textShadowRadius: 5
  },
  
});

效果图：

shadow

1.3 平台独有的

name	type	desc	platform
includeFontPadding	bool	默认值是true，显示文本时额外的字体填充	Android
textAlignVertical	enum(‘auto’, ‘top’, ‘bottom’, ‘center’)	垂直方向上文本对齐的方式	Android
letterSpacing	number	每个字符之间的空间	iOS
textDecorationColor	color	文本装饰线条的颜色	iOS
textDecorationStyle	enum(‘solid’, ‘double’, ‘dotted’, ‘dashed’)	文本装饰线条的风格	iOS
writingDirection	enum(‘auto’, ‘ltr’, ‘rtl’)	文本的书写方向	iOS

1.4 其它

name	type	desc
textAlign	enum(‘auto’, ‘left’, ‘right’, ‘center’, ‘justify’)	文本对齐方式，justify只在iOS平台有效，在Android平台等价于Left
textDecorationLine	enum(‘none’, ‘underline’, ‘line-through’, ‘underline line-through’)	横线相关设置
lineHeight	number	行的高度

2. 属性

name	type	desc	platform
ellipsizeMode	enum(‘head’, ‘middle’, ‘tail’, ‘clip’)	文本很长时，省略号显示的位置，是开头，中间还是末尾显示省略号。clip ：文本的末尾显示不下的内容会被截断，并且不添加省略号，clip只适用于iOS平台。
onPress	function	按下或者点击事件
onLongPress	function	长按事件
onLayout	function	布局发生变化时调用
numberOfLines	number	文本显示的行数
selectable	bool	默认值为false，为true时可以被选择并复制到系统剪切板中
selectionColor	color	文本被选择时的高亮颜色	Android
adjustsFontSizeToFit	bool	默认值为false，为true时字体会自动缩小，以适应给定的样式约束	iOS
minimumFontScale	number	adjustsFontSizeToFit属性为true时，设置字体的最小缩放比例，取值范围为0.01~1.0	iOS

还有一些属性这里没有提到，比如方便失能人士使用手机而提供的相关属性等等，具体的属性请查看官方文档。

实例代码：

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.title_view}>
         <Text style={styles.title_text}>
               Text&View 
         </Text>
        </View>
        <View style={styles.source_view}>
        <Text style={styles.source_text}>
               电讯报
         </Text>
         <Text style={styles.source_text}>
               语音播报
         </Text>
        </View>
         <Text style={styles.content_title_text}>
               穆帅专访：希望执教有雄心的球队
         </Text>
         <Text style={styles.content_text}>
               人们常说，失败会让你学到很多也许其中有些道理。我觉得胜利就像我的自然栖息地，这是我首次在18个月的执教时间里没能赢得任何奖杯...
         </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  title_view:{
    flexDirection:'row',
    height:50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor:'#27b5ee',
  },
   title_text:{
    color:'white',
    fontSize:22,
    textAlign:'center'
  },
  source_view:{
    flexDirection:'row',
    height:20,
    marginTop:10,
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor:'white',
  },
  source_text:{
    color:'#b1b1b1',
    fontSize:14,
    marginLeft:25,
    marginRight:25,
    textAlign:'center'
  },
  content_title_text:{
    color:'#343434',
    fontSize:20,
    marginTop:8,
    marginLeft:25,
    marginRight:25,
    textAlign:'left'
  },
  content_text:{
    color:'#b2b2b2',
    fontSize:16,
    marginTop:12,
    marginLeft:25,
    marginRight:25,
    textAlign:'left'
  },
});

效果图

demo