视图容器

参考文档

类型

  1. ComponentType<ViewProps>

示例代码

  1. export default class PageView extends Component {
  2.   constructor() {
  3.     super(...arguments)
  4.   }
  6.   render() {
  7.     return (
  8.       <View className='components-page'>
  9.         <Text>flex-direction: row 横向布局</Text>
  10.         <View className='flex-wrp' style='flex-direction:row;'>
  11.           <View className='flex-item demo-text-1'/>
  12.           <View className='flex-item demo-text-2'/>
  13.           <View className='flex-item demo-text-3'/>
  14.         </View>
  15.         <Text>flex-direction: column 纵向布局</Text>
  16.         <View className='flex-wrp' style='flex-direction:column;'>
  17.           <View className='flex-item flex-item-V demo-text-1'/>
  18.           <View className='flex-item flex-item-V demo-text-2'/>
  19.           <View className='flex-item flex-item-V demo-text-3'/>
  20.         </View>
  21.       </View>
  22.     )
  23.   }
  24. }

ViewProps

参数类型默认值必填说明
hoverClassstringnone否指定按下去的样式类。当 hover-class=”none” 时，没有点击态效果
hoverStylestringnone否由于 RN 不支持 Class，故 RN 端的 View 组件实现了 hoverStyle属性，写法和 style 类似，只不过 hoverStyle 的样式是指定按下去的样式。
hoverStopPropagationbooleanfasle否指定是否阻止本节点的祖先节点出现点击态
hoverStartTimenumber50否按住后多久出现点击态，单位毫秒
hoverStayTimenumber400否手指松开后点击态保留时间，单位毫秒

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
ViewProps.hoverClass✔️✔️✔️✔️✔️(由于 RN 不支持 Class，故 RN 端的 View 组件实现了 hoverStyle属性，写法和 style 类似，只不过 hoverStyle 的样式是指定按下去的样式。)
ViewProps.hoverStyle✔️
ViewProps.hoverStopPropagation✔️✔️✔️✔️
ViewProps.hoverStartTime✔️✔️✔️✔️✔️✔️
ViewProps.hoverStayTime✔️✔️✔️✔️✔️✔️

API 支持度

API微信小程序百度小程序支付宝小程序字节跳动小程序H5React Native
View✔️✔️✔️✔️✔️✔️