ReactNative Text的属性和样式

Text:

属性

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

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

tail：在末尾...省略（默认值）

clip：在末尾切割，直接切割字符无省略符

head：在前面...省略

middle：在中间...省略

3. onPress 点击事件

4. 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'
  },
});