Version: next

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

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

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