視圖

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

<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>

為了清晰和性能，視圖被設(shè)計(jì)成與樣式表一起使用，盡管是內(nèi)聯(lián)樣式也同樣支持。

工具

Edit on GitHub

accessibilityLabel 字符串型

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

accessible 布爾型

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

onMoveShouldSetResponder 函數(shù)

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

onResponderGrant 函數(shù)

onResponderMove 函數(shù)

onResponderReject 函數(shù)

onResponderRelease 函數(shù)

onResponderTerminate 函數(shù)

onResponderTerminationRequest 函數(shù)

onStartShouldSetResponder 函數(shù)

onStartShouldSetResponderCapture 函數(shù)

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

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

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

box-only 相當(dāng)于

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

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

removeClippedSubviews 布爾

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

style 字體

Flexbox...

backgroundColor 字符串

borderBottomColor 字符串

borderColor 字符串

borderLeftColor 字符串

borderRadius 數(shù)值

borderRightColor 字符串

borderTopColor 字符串

opacity 數(shù)值

overflow enum('visible', 'hidden')

rotation 數(shù)值

scaleX 數(shù)值

scaleY 數(shù)值

shadowColor 字符串

shadowOffset {h: number, w: number}

shadowOpacity 數(shù)值

shadowRadius 數(shù)值

transformMatrix [數(shù)值]

translateX 數(shù)值

translateY 數(shù)值

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>
      );
    },
  },
];