React-native之View（4）

一.简介

作为创建UI时最基础的组件，View是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上，View都会直接对应一个平台的原生视图，无论它是UIView、

还是android.view.View。

二.示例

import React, { AppRegistry, Component, StyleSheet, PixelRatio, Text, View } from 'react-native'; class ViewDemo extends Component { render() { return ( 中国 北京 上海 广州 深圳 ); } } const styles =StyleSheet.create({ container:{ borderRadius:5, marginLeft:5, marginRight:5, marginTop:300, backgroundColor:'#FF0067', padding:2, height:84, flexDirection:'row', }, flex:{ flex:1, }, item:{ flex: 1, height:80, }, font:{ color:'#fff', fontSize:16, fontWeight:'bold', }, center:{ justifyContent:'center', alignItems:'center' }, linerCenter:{ borderBottomWidth:1/PixelRatio.get(), borderColor:'#fff', }, lineLeftRight:{ borderLeftWidth:1/PixelRatio.get(), borderRightWidth:1/PixelRatio.get(), borderColor:'#fff', }, });

效果如下

5.png

三.属性

• accessibilityLabel string
  设置当用户与此元素交互时，“读屏器”（对视力障碍人士的辅助功能）阅读的文字。默认情况下，这个文字会通过遍历所有的子元素并累加所有的文本标签来构建。
• accessible bool
  当此属性为true时，表示此视图时一个启用了无障碍功能的元素。默认情况下，所有可触摸操作的元素都是无障碍功能元素。
• onAccessibilityTap function
  当accessible为true时，如果用户对一个已选中的无障碍元素做了一个双击手势时，系统会调用此函数。（译注：此事件是针对残障人士，并非是一个普通的点击事件。如果要为View添加普通点击事件，请直接使用Touchable系列组件替代View，然后添加onPress函数）。
• onLayout
  当组件挂载或者布局变化的时候调用，参数为：
  {nativeEvent: { layout: {x, y, width, height}}}
  这个事件会在布局计算完成后立即调用一次，不过收到此事件时新的布局可能还没有在屏幕上呈现，尤其是一个布局动画正在进行中的时候。
• onMagicTap
  当accessible为true时，如果用户做了一个双指轻触(Magic tap)手势，系统会调用此函数。

此外还有
onMoveShouldSetResponder，onMoveShouldSetResponderCapture,onPresponderGrant,onResponderMove,

onResponderReject,onResponderRelease,

onResponderTerminate,onResponderTerminationRequest,onStartShouldSetResponder,onStartShouldSetResponderCapture,

pointerEvents enum('box-none', 'none', 'box-only', 'auto')(触摸事件是否可以进行穿透控件View);

removeClippedSubviews:该控件由于进行优化性能，尤其在一些滑动控件上面。该属性生效的要求如下:首先子视图的内容非常多，

四.style

• Flexbox...

• Transforms...

• backfaceVisibility enum('visible', 'hidden')
  enum('visible', 'hidden')定义界面翻转的时候是否可见

• backgroundColor string
  背景颜色

• borderColor string
  边框颜色

• borderTopColor string

• borderRightColor string

• borderBottomColor string

• borderLeftColor string

• borderRadius number
  边框圆角大小

• borderTopLeftRadius number

• borderTopRightRadius number

• borderBottomLeftRadius number

• borderBottomRightRadius number

• borderStyle enum('solid', 'dotted', 'dashed')
  边框线的风格,这个和CSS样式一样的,enum('solid', 'dotted', 'dashed')

• borderWidth number
  边框宽度

• borderTopWidth number

• borderRightWidth number

• borderBottomWidth number

• borderLeftWidth number

• opacity number
  设置透明度

• overflow enum('visible', 'hidden')
  设置内容超过容器显示还是隐藏

• testID string
  用来在端到端测试中定位这个视图

• accessibilityComponentType (android平台)
  定义是否该UI组件和原生组件一致化处理

• accessibilityLiveRegion enum('none','polite','assertive') (android平台)
  告知无障碍服务当此视图更新时，是否要通知用户。只对Android API >= 19 的设备有效

• collapsable bool(android平台)
  如果一个View只用于布局它的子组件，则它可能会为了优化而从原生布局树中移除。 把此属性设为false可以禁用这个优化，以确保对应视图在原生结构中存在。

• .importantForAccessibility enum('auto', 'yes', 'no', 'no-hide-descendants') (android平台)
  设置视图响应事件等级

• needsOffscreenAlphaCompositing (android平台)
  设置View是否需要渲染和半透明度效果处理的先后次序。

• renderToHardwareTextureAndroid (android)
  设置是否需要GPU进行渲染

• accessibilityTraits (ios平台)
  为读屏器提供更多属性。除非在元素里指定，默认情况下不提供任何属性。

• shouldRasterizeIOS boolean (ios平台)
  决定这个视图是否需要在被混合之前绘制到一个位图上