React Native 之 View使用

前言

• 學習本系列內容需要具備一定 HTML 開發基礎。

• 本人接觸 React Native 時間并不是特別長，所以對其中的內容和性質了解可能會有所偏差，在學習中如果有錯會及時修改內容，也歡迎萬能的朋友們批評指出，謝謝

JSX 和 組件 的概念

• React的核心機制之一就是虛擬DOM（可以在內存中創建的虛擬DOM元素）React利用虛擬DOM來減少對實際DOM的操作從而提升性能。傳統的創建方式如下：

  var newBox = document.createElement('div');
      newBox.className = 'box';
      $('main').appendChild(newBox);

• 上面的代碼在可讀性方面比較不好，所以 React 開發了 JSX，利用我們熟悉的 HTML 語法來創建虛擬 DOM,創建方式如下：

  <div className="box">
      </div>

• 在實際開發中，JSX在產品打包階段已經編譯成純 JavaScript, JSX的語法不會帶來任何性能影響。所以，JSX可以看成是比較高級但依然直觀的語法糖

View 組件中常見的屬性

• React Native 組件 View,其作用等同于iOS中的 UIView,Android中的 android.view 或者網頁中的

  標簽，它是所有組件的父組件，也可以說所有組件繼承了它的所有屬性

• 這邊就將它常見的屬性羅列出來：
  • Flexbox：彈性布局
  • Transforms：動畫屬性
  • backfaceVisibility('visible', 'hidden')：定義界面翻轉的時候是否可見
  • backgroundColor：背景顏色

  // 背景顏色
      backgroundColor:'red'

  效果：

  
  • borderBottomColor：底部邊框顏色

  // 底部邊框寬度
      borderBottomWidth:5,
      // 底部邊框顏色
      borderBottomColor:'green'

  效果：
  
  • borderBottomLeftRadius：底部左邊邊框圓角

  // 底部邊框左圓角
      borderBottomLeftRadius:5

  效果：
  
  • borderBottomRightRadius：

  // 底部邊框右圓角
      borderBottomRightRadius:5

  效果：
  
  • borderBottomWidth：底部邊框寬度

  // 底部邊框寬度
      borderBottomWidth:5

  效果：
  
  • borderColor：邊框顏色

  // 全體邊框寬度
      borderWidth:5,
      // 全體邊框顏色
      borderColor:'yellow'

  效果：
  
  • borderLeftColor：左邊框顏色

  // 左邊邊框顏色
      borderLeftColor:'black'

  效果：
  
  • borderLeftWidth：左邊邊框寬度

  // 左邊邊框寬度
      borderLeftWidth:10

  效果：
  
  • borderRadius：邊框圓角

  // 全體邊框寬度
      borderWidth:5,
      // 全體邊框顏色
      borderColor:'black',
      // 全體邊框圓角
      borderRadius:3

  效果：
  
  • borderRightColor：右邊邊框顏色

  // 右邊框顏色
      borderRightColor:'yellow'

  效果：
  
  • borderRightWidth：右邊邊框寬度

  // 右邊框寬度
      borderRightWidth:10

  效果：
  
  • borderStyle('solid', 'dotted', 'dashed')：邊框風格

    // 邊框風格
        borderStyle:'solid'

    效果：
    

    // 邊框風格
        borderStyle:'dotted'

    效果：
    

    // 邊框風格
        borderStyle:'dashed'

    效果：
    

  • borderTopColor：頂部邊框顏色（參考上面）

  • borderTopWidth：頂部邊框寬度（參考上面）

  • borderTopLeftRadius：頂部左邊圓角（參考上面）

  • borderTopRightRadius：頂部右邊圓角（參考上面）

  • borderWidth：邊框寬度

  // 全體邊框寬度
      borderWidth:5

  效果：
  
  • opacity：設置透明度，取值從 0~1

  // 透明度
      opacity:0.5

  效果：
  

  • overflow('visible', 'hidden')：設置內容超出容器部分是否顯示（以后的文章講解）

  • elevation：高度，設置Z軸，可產生立體效果（以后文章講解）

  </li> </ul>

  View 組件使用

  • 簡單使用

  render() {
      return (
        <View style={styles.container}>
            <View style={{width:300, height:100, backgroundColor:'red', borderWidth:1, borderColor:'black'}}>
  
  
        </View>
    </View>
  );
  
  }</code></pre> 
    
   
     
   
  上面代碼是我們熟悉的 CSS 寫法
   
  效果：
   
   
     
   
  在 React Native 開發中，推薦我們采用 StyleSheet 來進行組件的布局，這樣從代碼結構上來看會更加清晰，有利于后期的維護
   
   
     
  我們將上面的樣式通過 StyleSheet 方式來實現 
  var test = React.createClass({
          render() {
              return (
                  <View style={styles.container}>
                      <View style={styles.viewStyle}>
  
  
                  </View>
              </View>
          );
      }
  });</code></pre> <pre>
  
  var styles = StyleSheet.create({
          container: {
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#F5FCFF',
          },
  
  
      viewStyle: {
          // 尺寸
          width:300,
          height:100,
          // 背景顏色
          backgroundColor:'red',
          // 邊框寬度
          borderWidth:1,
          // 邊框顏色
          borderColor:'black'
      }
  
  });</code></pre> </li> 
  
  </ul> 
    
  View 在開發中是經常會接觸到的組件，靈活運用它可以幫助我們更好地結構化代碼，甚至更方便的布局
   
    
   
   
    
  來自：http://www.cnblogs.com/miaomiaoshen/p/6144541.html