#
轉載請標明出處:
[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);
~~~
具體運行效果如下:

上述實例采用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>
~~~
具體運行效果如下:

我們看到整體字體格式為bold以及字體大小為28,不過后邊的'and red'的字體顏色為紅色。
?5.2.容器布局規則
??????? 之前我們介紹View組件,我們知道該組件是支持FlexBox(彈性布局),但是Text組件直接是文本布局的,也就是說一個Text接著Text,橫向,如果文本已經到末尾了,那就直接換行。
我們來看一下具體實例代碼:
~~~
<Text>
<Text>One Test </Text>
<Text>Second Test</Text>
</Text>
~~~
運行截圖如下:

這樣我們可以看到兩個Text直接橫向排布,第二個Text直接接在第一個Text后面了。但是如果該父控件采用View,View是支持FlexBox布局的,具體看如下實例代碼:
~~~
<View>
<Text>First part and </Text>
<Text>second part</Text>
</View>
~~~
默認垂直分布,運行結果如下:

?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);
~~~
具體運行截圖如下:

# (七)最后總結
????????? 今天我們主要給大家介紹Text組件的相關屬性和樣式的基本使用方法。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。
? ? ? ? ?尊重原創,轉載請注明:From Sky丶清([http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)) 侵權必究!
? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注,第一時間推送精彩文章)

? ? ?關注我的微博,可以獲得更多精彩內容
? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)
?
?
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)