React Native元件篇（一） — Text元件

ZY_FlyWay發表於2017-08-14
React Native元件

1、什麼是Text


     在iOS中很多元件都有顯示文字的功能，一般文字都是寫在Label上。在ReactNative中類似Label顯示文字的元件叫什麼呢，也就是我們今天要學的這個Text元件。Text可以巢狀，設定事件處理等等




2、Text元件常用的屬性方法


        
Attributes.style = {
color string
containerBackgroundColor string
fontFamily string
        fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
lineHeight number
textAlign enum("auto", 'left', 'right', 'center')
writingDirection enum("auto", 'ltr', 'rtl')
numberOfLines number
textAlign ("auto", 'left', 'right', 'center', 'justify')
fontWeight ("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
onPress fcuntion
}


屬性解釋對應意思：


color 字型顏色
numberOfLines (number) 進行設定Text顯示文字的行數，如果顯示的內容超過了行數，預設其他多餘的資訊就不會顯示了
onPress (fcuntion) 該方法當文字發生點選的時候呼叫該方法
color 字型顏色
fontFamily 字型名稱
fontSize 字型大小
fontStyle 字型風格(normal,italic)
fontWeight 字型粗細權重("normal", 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
textShadowOffset 設定陰影效果{width: number, height: number}
textShadowRadius 陰影效果圓角
textShadowColor 陰影效果的顏色
letterSpacing 字元間距
lineHeight 行高
textAlign 文字對其方式("auto", 'left', 'right', 'center', 'justify')
textDecorationLine 橫線位置 ("none", 'underline', 'line-through', 'underline line-through')
textDecorationStyle 線的風格("solid", 'double', 'dotted', 'dashed')
textDecorationColor 線的顏色
writingDirection 文字方向("auto", 'ltr', 'rtl')



allowFontScaling：控制字型是否要根據iOS的“文字大小”輔助選項來進行縮放

adjustsFontSizeToFit：指定字型是否隨著給定樣式的限制而自動縮放

minimumFontScale：當adjustsFontSizeToFit開啟時，指定最小的縮放比（即不能低於這個值）。可設定的值為0.01 - 1.0

suppressHighlighting：當為true時，如果文字被按下，則沒有任何視覺效果。預設情況下，文字被按下時會有一個灰色的、橢圓形的高光

selectable：決定使用者是否可以長按選擇文字，以便複製和貼上



2、Text元件常用的屬性應用Demo



Demo程式碼如下：

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

class RNHybrid extends Component {

  render() {
    return(
        <View style={{marginTop:100}} >     
            <Text style={styles.TextStyle1} numberOfLines={3}  onPress={this.onPressText} >
                我是第一塊程式碼,撒幾點啦資料庫盧達克里斯記得開拉就上課了大街奧盛經理對接薩克雷簡單快樂撒嬌恐龍當家了撒嬌地阿基山莨菪鹼庫拉索大街奧盛恐龍當家可拉伸機開啟連線愛上了你參謀，是那麼，從MsABC蒙巴薩故事機奧迪和傑卡斯。
            </Text>
             <Text style={{marginBottom:20}} onPress={()=>{alert('我是箭頭函式')}}>
                我是第二塊程式碼
            </Text>
            <Text selectable={true}>
                我是第三塊程式碼,長按我可以複製我。
            </Text>   
        </View>
      );
  }

  onPressText(){
    alert('點選demo')
  }
}

const styles = StyleSheet.create({
    TextStyle1:{
        marginBottom:20,
        color:'red',
        fontFamily:'Times',
        fontSize:20,
        fontStyle:'italic',
        fontWeight:('bold', '700'),
        textShadowOffset:{width:3, height:5},
        textShadowColor:'black',
        textShadowRadius:3,
    },
});

AppRegistry.registerComponent('RNHybrid', () => RNHybrid);



效果圖：





總結：屬性主要試了幾個通用的，屬性效果大家可以自行測試，注意看下Demo 中onpress兩種表達方式，在以後的開發中，慢慢就會感知到利弊。



3、Text元件的巢狀和繼承



巢狀使用Demo程式碼：

render() {
    return(
        <View style={{marginTop:100}}>
            <Text style={{color:'red',textAlign:'center',textDecorationLine:'underline',fontSize:10,lineHeight:50}} >  
             {'\r'}我是最外面的紅色 
               <Text style={{color:'blue',fontSize:20}}>   
                 {'\r'}我是中間的藍色  
                  <Text style={{color:'black',textDecorationLine:'line-through',textDecorationColor:'green',textDecorationStyle:'double'}}>  
                    {'\r'}我是最裡面的黑色 
                  </Text>  
                  <Text>  
                    {'\r'}我沒有屬性都是繼承父控制元件 
                  </Text>
                </Text>  
            </Text>   
        </View>
      );
  }


效果如下：




     總結： 在巢狀的Text元件中，子Text元件將繼承它的父Text元件的樣式，當使用巢狀的Text元件時，子Text元件不能覆蓋從父Text元件繼承而來的樣式，只能增加父Text元件沒有指定的樣式。
     
      注意點：預設情況下巢狀的Text是不換行的，子控制元件的內容跟在父控制元件的後面，加上{'\r'}或者{'\n'}換行顯示.


相關文章