React Native 之 View使用

前言

• 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ)，沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí)

• 本人接觸 React Native 時(shí)間并不是特別長(zhǎng)，所以對(duì)其中的內(nèi)容和性質(zhì)了解可能會(huì)有所偏差，在學(xué)習(xí)中如果有錯(cuò)會(huì)及時(shí)修改內(nèi)容，也歡迎萬能的朋友們批評(píng)指出，謝謝

• 文章第一版出自簡(jiǎn)書，如果出現(xiàn)圖片或頁面顯示問題，煩請(qǐng)轉(zhuǎn)至 簡(jiǎn)書 查看 也希望喜歡的朋友可以點(diǎn)贊，謝謝

JSX 和 組件 的概念

• React的核心機(jī)制之一就是虛擬DOM（可以在內(nèi)存中創(chuàng)建的虛擬DOM元素）React利用虛擬DOM來減少對(duì)實(shí)際DOM的操作從而提升性能。傳統(tǒng)的創(chuàng)建方式如下：

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

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

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

• 在實(shí)際開發(fā)中，JSX在產(chǎn)品打包階段已經(jīng)編譯成純 JavaScript, JSX的語法不會(huì)帶來任何性能影響。所以，JSX可以看成是比較高級(jí)但依然直觀的語法糖

View 組件中常見的屬性

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

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

• 這邊就將它常見的屬性羅列出來：

      // 背景顏色
      backgroundColor:'red'

  效果：