轉載請標明出處：

(一)前言

      【好訊息】個人網站已經上線執行,後面部落格以及技術乾貨等精彩文章會同步更新，請大家關注收藏:http://www.lcode.org

       現在幾講我們對於React Native一些基礎做了相關講解(例如:環境搭建,開發IDE,除錯以及升級降級等)，今天開始正式進入UI相關元件學習的階段了。首先我們來講一個非常基礎的元件View。

剛建立的React Native技術交流3群(496508742),React Native技術交流4群(458982758)，請不要重複加群！歡迎各位大牛,React Native技術愛好者加入交流!同時部落格左側歡迎微信掃描關注訂閱號

(二)View元件介紹

         View作為建立UI時候的最基礎，最常用的元件。這邊的View元件是支援FlexBox佈局(對於FlexBox佈局的詳細使用講解，請點選)，CSS樣式以及相關觸控處理的容器元件。該元件我們可以巢狀在其他檢視View裡邊，並且可以包含很多種型別的子檢視。在Web,Android，iOS三種平臺上面該View檢視可以對應平臺中的三種原生檢視，其中iOS對於UIView

，Web端對應<div>標籤，Android對於android.view。下面我們來看一個比較簡單的例項:

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  View,
} = React;
var TestText = React.createClass({
  render: function() {
    return (
      <View style={{flexDirection:'row',padding:20,height:100}}>
        <View style={{backgroundColor:'red',flex:1}}>
        </View>
      </View>
    );
  }
});
 

上述例子,我們這般首先建立了一個View，該View高度為100 ，但是該View的padding為20，所以整體效果如下:

如果把padding修改成margin:20的話，那麼是效果如下:

這個相信做過CSS ,原生布局開發的話，大家應該都能看得懂的。

其實ReactNative開發，View設計的時候，也支援我們採用StyleSheet來進行書寫控制元件的的佈局，這樣的話，我們的程式碼會更加的清晰以及便於維護了。其實React Native開發也更加推薦這種方式，下面我們採用StyleSheet來實現一下:

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  View,
  StyleSheet,
} = React;

var TestText = React.createClass({
  render: function() {
    return (
      <View style={styles.first_view}>
        <View style={styles.second_view}>
        </View>
      </View>
    );
  }
});
var styles = StyleSheet.create({
  first_view:{
    flexDirection:'row',
    height:100,
    padding:20
  },
  second_view: {
    backgroundColor:'red',
    flex:1
  },
});
AppRegistry.registerComponent('TestText', () => TestText);
 

以上的程式碼我們發現使用StyleSheet，進行建立相關styles，然後賦值給styles物件，在控制元件中直接styles物件進行使用即可。還是比較OK的。

(三)View屬性方法介紹

  View屬性方法介紹如下:

其他的一些方法如下(下面很多是關於事件響應者鏈的，基本都是比較簡單的，就不著重講解的，有興趣大家都可以去測試一下):

onMoveShouldSetResponder，onMoveShouldSetResponderCapture,onPresponderGrant,onResponderMove,onResponderReject,onResponderRelease,onResponderTerminate,onResponderTerminationRequest,onStartShouldSetResponder,onStartShouldSetResponderCapture,pointerEvents enum('box-none', 'none', 'box-only', 'auto')(觸控事件是否可以進行穿透控制元件View);

removeClippedSubviews:該控制元件由於進行優化效能，尤其在一些滑動控制元件上面。該屬性生效的要求如下:首先子檢視的內容非常多，已經超過父容器，並且子檢視和付容器檢視都有overflow:hidden風格樣式。

【注】關於上面一些方法的具體使用，後面在講到事件響應者的時候會進行著重講解。

(四)View風格Style介紹

在React Native中的Style風格佈局，其實和CSS樣式有很多相似的地方，這邊介紹一下:

下面是幾個特殊的屬性，這邊直接介紹所有平臺通用以及只在Android平臺有效果的屬性

①.testID  (全平臺)

可以根據該testID在測試的時候定位該View

②:accessibilityComponentType(android平臺)

定義是否該UI元件和原生元件一致化處理

③.accessibilityLiveRegionenum('none','polite','assertive') (android平臺)

該當View發生更新時候的，是否需要通過使用者，不過該只對Android4.4以及以上的平臺裝置有效果

④.collapsable (android平臺)

佈局合併優化使用

⑤.importantForAccessibility enum('auto','yes', 'no', 'no-hide-descendants') (android平臺)

設定檢視響應事件等級

⑥.needsOffscreenAlphaCompositing (android平臺)

設定View是否需要渲染和半透明度效果處理的先後次序。

⑦.renderToHardwareTextureAndroid (android)

設定是否需要GPU進行渲染

(五)最後總結

今天我們主要介紹了基礎控制元件View的使用方法以及相關屬性風格，大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回覆一下。

       關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),專案管理以及部落格文章!(歡迎關注，第一時間推送精彩文章)

     關注我的微博，可以獲得更多精彩內容