Skip to main content
Version: 3.x

View

视图容器

支持情况:

参考文档

类型

ComponentType<ViewProps>

示例代码

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<View className='components-page'>
<Text>flex-direction: row 横向布局</Text>
<View className='flex-wrp' style='flex-direction:row;'>
<View className='flex-item demo-text-1'/>
<View className='flex-item demo-text-2'/>
<View className='flex-item demo-text-3'/>
</View>
<Text>flex-direction: column 纵向布局</Text>
<View className='flex-wrp' style='flex-direction:column;'>
<View className='flex-item flex-item-V demo-text-1'/>
<View className='flex-item flex-item-V demo-text-2'/>
<View className='flex-item flex-item-V demo-text-3'/>
</View>
</View>
)
}
}

ViewProps

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

API 支持度

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