React Native 视图

创建 UI 最基本的组件,view 是一个容器,它支持 flexbox 布局、风格、一些触发处理,和可访问性控制,它被设计成嵌套在其他视图里,并且有 0 到很多个任意类型的孩子。view 直接映射到原生视图,相当于在任意正在运行的平台上的响应,不管它是 UIView,<div>,android.view,等等。这个例子创建了一个视图,将两个颜色的框和自定义的组件打包填充成一行。

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

为了清晰和性能,视图被设计成与样式表一起使用,尽管是内联样式也同样支持。


工具

accessibilityLabel 字符串型

当用户与元素进行交互时,覆盖通过屏幕阅读器阅读的文本。在默认情况下,标签是通过遍历所有孩子和累积所有由空间隔开的文本节点创建的。

accessible 布尔型

当它的值为真时,说明视图是一个可访问的元素。在默认情况下,所有的可触发的元素都是可以被访问的。

onMoveShouldSetResponder 函数

对于大多数的触发交互,你可能只是想在 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 并不影响布局/外观,通过添加附加模式,我们已经偏离了规范,我们选择在 style 上不包括 pointerEvents。在一些平台上,不管怎样偶们都需要将它作为一个 className 来实现。是否使用 style 时这个平台的实现细节。

removeClippedSubviews 布尔

这是一个通过 RCTView 显示的特定性能属性,当有很多子视图,并且它们大部分都是在幕后,这时被用于滚动内容。为了使这个属性有效,它必须被应用到一个视图中,在这个视图里包含很多子视图和外部约束。子视图中还应该有溢出:隐藏,应该包含视图(或者它的一个子视图)。

style 字体

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 字符串型

在端到端测试中用于定位视图


例子

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

链接: https://fly63.com/course/16_891