<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                企業??AI智能體構建引擎,智能編排和調試,一鍵部署,支持知識庫和私有化部署方案 廣告
                # 轉載請標明出處: [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) ? ?
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看