視圖

創(chuàng)建 UI 最基本的組件，view 是一個容器，它支持 flexbox 布局、風格、一些觸發(fā)處理，和可訪問性控制，它被設計成嵌套在其他視圖里，并且有 0 到很多個任意類型的孩子。view 直接映射到原生視圖，相當于在任意正在運行的平臺上的響應，不管它是 UIView，<div>，android.view，等等。這個例子創(chuàng)建了一個視圖，將兩個顏色的框和自定義的組件打包填充成一行。

<View style={{flexDirection: 'row', height: 100, padding: 20}}>
  <View style={{backgroundColor: 'blue', flex: 0.3}} />
  <View style={{backgroundColor: 'red', flex: 0.5}} />
  <MyCustomComponent {...customProps} /></View>

為了清晰和性能，視圖被設計成與樣式表一起使用，盡管是內聯樣式也同樣支持。

工具

Edit on GitHub

accessibilityLabel 字符串型

當用戶與元素進行交互時，覆蓋通過屏幕閱讀器閱讀的文本。在默認情況下，標簽是通過遍歷所有孩子和累積所有由空間隔開的文本節(jié)點創(chuàng)建的。

accessible 布爾型

當它的值為真時，說明視圖是一個可訪問的元素。在默認情況下，所有的可觸發(fā)的元素都是可以被訪問的。

onMoveShouldSetResponder 函數

對于大多數的觸發(fā)交互，你可能只是想在 TouchableHighlight 或者 TouchableOpacity 里包裝你的組件。為了進一步的探討，檢查 Touchable.js，ScrollResponder.js 和ResponderEventPlugin.js。

onResponderGrant 函數

onResponderMove 函數

onResponderReject 函數

onResponderRelease 函數

onResponderTerminate 函數

onResponderTerminationRequest 函數

onStartShouldSetResponder 函數

onStartShouldSetResponderCapture 函數

pointerEvents enum('box-none', 'none', 'box-only', 'auto')

缺乏auto 屬性，none 更像是 CSS 的 none 值。box-none 就好像你已經應用了 CSS 類：

.box-none {  pointer-events: none;
}.box-none * {  pointer-events: all;
}

box-only 相當于

.box-only {  pointer-events: all;
}.box-only * {  pointer-events: none;
}

但是由于 pointerEvents 并不影響布局/外觀，通過添加附加模式，我們已經偏離了規(guī)范，我們選擇在 style 上不包括pointerEvents。在一些平臺上，不管怎樣偶們都需要將它作為一個 className 來實現。是否使用 style 時這個平臺的實現細節(jié)。

removeClippedSubviews 布爾

這是一個通過 RCTView 顯示的特定性能屬性，當有很多子視圖，并且它們大部分都是在幕后，這時被用于滾動內容。為了使這個屬性有效，它必須被應用到一個視圖中，在這個視圖里包含很多子視圖和外部約束。子視圖中還應該有溢出：隱藏，應該包含視圖（或者它的一個子視圖）。

style 字體

Flexbox...

backgroundColor 字符串

borderBottomColor 字符串

borderColor 字符串

borderLeftColor 字符串

borderRadius 數值

borderRightColor 字符串

borderTopColor 字符串

opacity 數值

overflow enum('visible', 'hidden')

rotation 數值

scaleX 數值

scaleY 數值

shadowColor 字符串

shadowOffset {h: number, w: number}

shadowOpacity 數值

shadowRadius 數值

transformMatrix [數值]

translateX 數值

translateY 數值

testID 字符串型

在端到端測試中用于定位視圖

例子

Edit on GitHub

'use strict';
var React = require('react-native');
var {
  StyleSheet,
  Text,
  View,
} = React;
var styles = StyleSheet.create({
  box: {
    backgroundColor: '#527FE4',
    borderColor: '#000033',
    borderWidth: 1,
  }
});
exports.title = '<View>';
exports.description = 'Basic building block of all UI.';
exports.displayName = 'ViewExample';
exports.examples = [
  {
    title: 'Background Color',
    render: function() {
      return (        <View style={{backgroundColor: '#527FE4', padding: 5}}>
          <Text style={{fontSize: 11}}>
            Blue background          </Text>
        </View>
      );
    },
  }, {
    title: 'Border',
    render: function() {
      return (        <View style={{borderColor: '#527FE4', borderWidth: 5, padding: 10}}>
          <Text style={{fontSize: 11}}>5px blue border</Text>
        </View>
      );
    },
  }, {
    title: 'Padding/Margin',
    render: function() {
      return (        <View style={{borderColor: '#bb0000', borderWidth: 0.5}}>
          <View style={[styles.box, {padding: 5}]}>
            <Text style={{fontSize: 11}}>5px padding</Text>
          </View>
          <View style={[styles.box, {margin: 5}]}>
            <Text style={{fontSize: 11}}>5px margin</Text>
          </View>
          <View style={[styles.box, {margin: 5, padding: 5, alignSelf: 'flex-start'}]}>
            <Text style={{fontSize: 11}}>
              5px margin and padding,            </Text>
            <Text style={{fontSize: 11}}>
              widthAutonomous=true            </Text>
          </View>
        </View>
      );
    },
  }, {
    title: 'Border Radius',
    render: function() {
      return (        <View style={{borderWidth: 0.5, borderRadius: 5, padding: 5}}>
          <Text style={{fontSize: 11}}>
            Too much use of `borderRadius` (especially large radii) on
            anything which is scrolling may result in dropped frames.
            Use sparingly.          </Text>
        </View>
      );
    },
  }, {
    title: 'Circle with Border Radius',
    render: function() {
      return (        <View style={{borderRadius: 10, borderWidth: 1, width: 20, height: 20}} />
      );
    },
  }, {
    title: 'Overflow',
    render: function() {
      return (        <View style={{flexDirection: 'row'}}>
          <View
            style={{
              width: 95,              height: 10,              marginRight: 10,              marginBottom: 5,              overflow: 'hidden',              borderWidth: 0.5,
            }}>
            <View style={{width: 200, height: 20}}>
              <Text>Overflow hidden</Text>
            </View>
          </View>
          <View style={{width: 95, height: 10, marginBottom: 5, borderWidth: 0.5}}>
            <View style={{width: 200, height: 20}}>
              <Text>Overflow visible</Text>
            </View>
          </View>
        </View>
      );
    },
  }, {
    title: 'Opacity',
    render: function() {
      return (        <View>
          <View style={{opacity: 0}}><Text>Opacity 0</Text></View>
          <View style={{opacity: 0.1}}><Text>Opacity 0.1</Text></View>
          <View style={{opacity: 0.3}}><Text>Opacity 0.3</Text></View>
          <View style={{opacity: 0.5}}><Text>Opacity 0.5</Text></View>
          <View style={{opacity: 0.7}}><Text>Opacity 0.7</Text></View>
          <View style={{opacity: 0.9}}><Text>Opacity 0.9</Text></View>
          <View style={{opacity: 1}}><Text>Opacity 1</Text></View>
        </View>
      );
    },
  },
];