Skip to main content
Version: 3.x

View

View container.

Reference

Type

ComponentType<ViewProps>

Examples


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

PropertyTypeDefaultRequiredDescription
hoverClassstringnoneNo The style class of the button that is tapped. When hover-class="none" , the tap state is not displayed.
hoverStylestringnoneSince RN does not support Class, the View component on the RN side implements the hoverStyleproperty. hoverStyle is written similarly to style, except that it specifies the style to be pressed.
hoverStopPropagationbooleanfasleNoSpecifies whether to block the tapped state from the ancestor node of this node.
hoverStartTimenumber50NoSpecifies the time elapsed after tapping but before the tapped state occurs. It is measured in milliseconds.
hoverStayTimenumber400NoSpecifies the duration when the tapped state retains after stopping tapping. It is measured in milliseconds.
catchMovebooleanfalseBlock scrolling events from penetrating.

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
ViewProps.hoverClass✔️✔️✔️✔️✔️
ViewProps.hoverStyle✔️
ViewProps.hoverStopPropagation✔️✔️✔️✔️
ViewProps.hoverStartTime✔️✔️✔️✔️✔️✔️
ViewProps.hoverStayTime✔️✔️✔️✔️✔️✔️

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
View✔️✔️✔️✔️✔️✔️