<p id="qitwt"></p>
      1. <object id="qitwt"><strong id="qitwt"></strong></object>
        <p id="qitwt"></p>
        <li id="qitwt"></li>
        <p id="qitwt"><del id="qitwt"><xmp id="qitwt"></xmp></del></p>
        <p id="qitwt"><label id="qitwt"></label></p>
      2. <acronym id="qitwt"></acronym>
        <p id="qitwt"></p>
        免費開源的iOS開發學習平臺

        React Native基礎:5-樣式style

        樣式style簡介

        React Native中的每個組件都有一個style的屬性,我們可以通過style屬性來設置組件的樣式。例如,下面的代碼中,通過設置Text組件的樣式來設置顯示文字的顏色為藍色。

        <Text style={{color: 'blue'}}>{display}</Text>
        

        React Native中的樣式名基本遵循了web上的CSS的命名,只是按照JS的語法要求使用了駝峰命名法,例如將background-color改為backgroundColor。一般來說,組件支持的樣式大概有幾十種,常用的樣式可以參考下面的表格。

        | 樣式名 | 值 | 備注 |
        | --- | --- | --- |
        |fontSize|數值|文字字體大小|
        | backfaceVisibility | enum('visible', 'hidden') | 設置組件背面是否可見。 |
        | backgroundColor | string | 屬性設置元素的背景顏色。 |
        | borderColor | string | 屬性設置四條邊框的顏色。|
        | borderRadius | number | 設置邊框的圓角。 |
        | borderStyle | enum('solid', 'dotted', 'dashed') | 設置邊框的樣式。 |
        | borderWidth | number | 設置邊框設置寬度。 |
        | shadowColor | color | 設置陰影色 |
        | opacity | number | 設置組件的不透明度。 |
        | overflow | enum('visible', 'hidden') | 設置超出組件的部分是顯示,還是隱藏。 |

        我們可以自己嘗試這些樣式是如何控制組件顯示的,例如在下方的代碼中,我們為Text組件定制了其fontSize、backgroundColor、color、borderColor、borderWidth、borderRadius、opacity樣式屬性。

        export default class AwesomeProject extends Component {
          render() {
            return (
              <View style={styles.container}>
              <Text style={{fontSize:30,backgroundColor: 'yellow', color: 'red', borderColor: 'blue', borderWidth: 4, borderRadius: 4, opacity: 0.5,}}> www.shengdelvshi.com </Text>
              </View>
            );
          }
        }
        

        程序運行后,我們可以看到顯示的Text組件樣式已經進行了更新。

        StyleSheet模塊

        在React Native中,StyleSheet模塊實現了類似Web中CSS樣式表的功能,通過StyleSheet.create可以集中定義組件的樣式。在代碼中需要使用樣式的地方,只需要直接獲取不同的styles中的變量即可。接下來,我們定義三種樣式:

        1. container:用來設置容器的布局、背景等樣式;
        2. redText:設置字體顏色為紅色,字號為30;
        3. yellowBackground:設置背景為黃色。
        const styles = StyleSheet.create({
          container: {
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#F5FCFF',
          },
          redText: {
              color: 'red',
              fontSize: 30
          },
          yellowBackground: {
              backgroundColor: 'yellow'
          },
        });
        

        樣式定義完成后,我們可以在AwesomeProject組件中,使用已經定義的樣式。

        export default class AwesomeProject extends Component {
          render() {
            return (
                <View style={styles.container}>
                  <Text style={[styles.redText, styles.yellowBackground]}>  www.shengdelvshi.com </Text>
                </View>
            );
          }
        }
        

        運行程序后,可以看到Text組件已經使用了預設的樣式。

        在實際的開發過程中,推薦使用這種方式來管理組件的樣式。這樣實現方式有如下幾個優點:

        • 便于修改樣式,只需要在StyleSheet模塊中修改樣式,所有應用這個樣式的組件都會同步更新樣式。
        • 能有效統一組件的樣式,使整個應用的風格統一。

        青青草国产成人久久_jizzjizz日本护士高清_亚洲 另类 国产 另类_99久久免费精品色老
        <p id="qitwt"></p>
          1. <object id="qitwt"><strong id="qitwt"></strong></object>
            <p id="qitwt"></p>
            <li id="qitwt"></li>
            <p id="qitwt"><del id="qitwt"><xmp id="qitwt"></xmp></del></p>
            <p id="qitwt"><label id="qitwt"></label></p>
          2. <acronym id="qitwt"></acronym>
            <p id="qitwt"></p>