React Native控件之Text組件講解(9) · React Native學習指南

# 轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50550518](http://blog.csdn.net/developer_jiangqq/article/details/50550518) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ? ? ? ? ?【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)? ? ? ? ?今天我們一起來看一下Text控件的具體介紹和使用方法，具體環境搭建以及相關配置的請查看之前的相關文章。 ???????? 剛創建的React Native技術交流群(282693535),歡迎各位大牛,React Native技術愛好者加入交流!同時博客左側歡迎微信掃描關注訂閱號,移動技術干貨,精彩文章技術推送! # (二)基本介紹 ???????? 該Text組件為React中一個基本組件，該和Android中的TextView組件相類似用來顯示基本的文本信息，該控件除了基本的顯示布局之外，可以進行嵌套顯示，設置樣式，以及可以做事件(例如:點擊)處理。下面我們來一個實例： ~~~ /** * 進行簡單Text組件使用實例 * Sample React Native App test.android.js * https://github.com/facebook/react-native */ 'use strict'; var React =require('react-native'); var { AppRegistry, Text, StyleSheet, } = React; var styles =StyleSheet.create({ titleBase:{ margin:10, textAlign:'center', color:'red', fontSize:28, fontFamily:'Cochin', }, title:{ color:'green', fontWeight:'bold', }, }); var TestText =React.createClass({ render: function() { return ( <Text style={styles.titleBase}> I am root text! <Text style={styles.title}> I am chid text! </Text> </Text> ); } }); AppRegistry.registerComponent('TestText',() => TestText); ~~~ 具體運行效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbffa36c0.jpg) 上述實例采用TextView的嵌套方式，最外層的Text的StyletitleBase定義相關風格，內層的風格style定義相關風格，我們可以看到運行效果，如果內層沒有重寫外層定義的樣式，那么內層會進行繼承。如果重寫了樣式，那么內層會根據自己定義的樣式進行渲染，該和CSS樣式表差不多。上面例子主要定義了布局，字體大小，字體風格，顏色等相關樣式，下面我們會著重進行講解。 # (三)屬性方法(主要一些可用的屬性) ????? ①.allowFontScaling (bool):控制字體是否根據iOS的設置進行自動縮放-iOS平臺,Android平臺不適用 ????? ②.numberOfLines (number):進行設置Text顯示文本的行數，如果顯示的內容超過了行數，默認其他多余的信息就不會顯示了。 ???? ③.onLayout (function) 當布局位置發生變動的時候自動進行觸發該方法, 其中該function的參數如下: ~~~ {nativeEvent: {layout: {x, y, width, height}}} ~~~ ???? ④.onPress (fcuntion) 該方法當文本發生點擊的時候調用該方法. # (四)風格樣式 ????? 1..繼承可以使用View組件的所有Style(具體查看[http://facebook.github.io/react-native/docs/view.html#style](http://facebook.github.io/react-native/docs/view.html#style)) ????? 2.color:字體顏色???????????????????????????????? ????? 3..fontFamily 字體名稱 ????? 4..fontSize? 字體大小 ????? 5..fontStyle?? 字體風格(normal,italic) ????? 6..fontWeight? 字體粗細權重("normal", 'bold', '100', '200', '300', '400', '500','600', '700', '800', '900') ????? 7..textShadowOffset 設置陰影效果{width: number, height: number} ????? 8..textShadowRadius陰影效果圓角?????? 9..textShadowColor陰影效果的顏色 ????? 10.letterSpacing字符間距??????????? 11.lineHeight行高 ????? 12.textAlign?? 文本對其方式("auto",'left', 'right', 'center', 'justify') ????? 13.textDecorationLine? 橫線位置("none", 'underline', 'line-through', 'underlineline-through') ????? 14.textDecorationStyle??線的風格("solid", 'double', 'dotted','dashed') ????? 15.textDecorationColor? 線的顏色??????16.writingDirection? 文本方向("auto", 'ltr','rtl') # (五)特別注意點 ??????? 5.1.嵌套特點:和Web上面一直的設計方案，我們通過嵌套包裹的方案，相同的屬性的文本可以用父標簽進行包裹，然后內部特殊的文本采用子標簽方案，具體例子如下:?? ~~~ <Text style={{fontWeight:'bold',fontSize:28}}> I am bold <Text style={{color: 'red'}}> and red </Text> </Text> ~~~ 具體運行效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbffbf86c.jpg) 我們看到整體字體格式為bold以及字體大小為28，不過后邊的'and red'的字體顏色為紅色。 ?5.2.容器布局規則 ??????? 之前我們介紹View組件，我們知道該組件是支持FlexBox(彈性布局),但是Text組件直接是文本布局的，也就是說一個Text接著Text，橫向，如果文本已經到末尾了，那就直接換行。我們來看一下具體實例代碼: ~~~ <Text> <Text>One Test </Text> <Text>Second Test</Text> </Text> ~~~ 運行截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbffd333b.jpg) 這樣我們可以看到兩個Text直接橫向排布，第二個Text直接接在第一個Text后面了。但是如果該父控件采用View，View是支持FlexBox布局的，具體看如下實例代碼: ~~~ <View> <Text>First part and </Text> <Text>second part</Text> </View> ~~~ 默認垂直分布,運行結果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fbffe838c.jpg) ?5.3.樣式繼承規格 ??????? 從以上一些例子中我們也發現了，組件可以嵌套，而且樣式還支持繼承，也就說父組件定義了相關樣式，如果子組件沒有重寫樣式的話，那么該子組件會繼承父組件定義的樣式。 # (六)Text實例 ?????? 下面使用以上一些屬性和相關樣式來演示一下實例: ~~~ /** * Text組件實例演示 * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; var React =require('react-native'); var { AppRegistry, Text, View, StyleSheet, } = React; var TestText =React.createClass({ render: function() { return ( <View> <Text style={{color:'red'}}> My Text One 紅色。 </Text> <Textstyle={{color:'green',fontSize:20}}> My Text Two 綠色和字體大小。</Text> <Textstyle={{color:'green',fontFamily:'Cochin'}}> My Text Three 綠色和字體名稱。</Text> <Textstyle={{color:'pink',fontWeight:'bold'}}> My Text Four 粉色和加粗。</Text> <Textstyle={{color:'gray',fontStyle:'italic'}}> My Text Five 灰色和斜體。</Text> <Textstyle={{textAlign:'center',fontStyle:'italic'}}> My Text Six 居中和斜體。</Text> <TextnumberOfLines={1} style={{textAlign:'center',fontStyle:'italic'}}>測試行數My Text Six 居中和斜體。My Text Six 居中和斜體。 My Text Six 居中和斜體。</Text> <Textstyle={{marginLeft:50,marginTop:50,textAlign:'center',fontStyle:'italic'}}>設置文本的間距,居左，居頂部50</Text> <Text numberOfLines={2}style={{lineHeight:50,textAlign:'center',fontStyle:'italic'}}> 測試行高測試行高測試行高測試行高測試行高測試行高測試行高測試行高測試行高測試行高測試行高測試行高測試行高測試行高測試行高測試行高測試行高 </Text> </View> ); } }); AppRegistry.registerComponent('TestText',() => TestText); ~~~ 具體運行截圖如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc0008778.jpg) # (七)最后總結 ????????? 今天我們主要給大家介紹Text組件的相關屬性和樣式的基本使用方法。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)）侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章) ![](https://box.kancloud.cn/2016-02-29_56d3fbf75e010.jpg) ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[![](https://box.kancloud.cn/2016-02-29_56d3fbf76bdef.png)](http://weibo.com/u/1855428195?s=6uyXnP) ? ?